DEV Community: Lev Izraelit

Building a Covid-19 Case Tracker by US State and County - Part 1

Lev Izraelit — Sun, 19 Apr 2020 00:00:00 +0000

Introduction

In this series of articles we will use the New York Times Covid-19 data to create a case tracker, which will display the data as a time series. Users will be able to view data for the US as a whole, or narrow it down by state and by county. The complete web app is available on GitHub - covid-19-us and a live version is hosted at http://covid19-us.levizraelit.com. We will use React and Typescript along with other libraries for UI and chart visualization. If you have not used Typescript before, these articles will also introduce you to some of the fundamentals and more advanced concepts of the language.

Taking a look at the data

The data in the New York Times Covid-19 dateset is hosted in 3 csv file - us.csv, us-states.csv and us-counties.csv. We can see each of these files in its raw form by clicking on the Raw button at the top right corner.

US Data

Looking at the raw US data, we can see the following:

date,cases,deaths
2020-01-21,1,0
2020-01-22,1,0
2020-01-23,1,0
2020-01-24,2,0
2020-01-25,3,0
2020-01-26,5,0
2020-01-27,5,0
...

The file consists of 3 columns, where the first row contains the column names: date, cases and deaths. The subsequent rows contain values for each the three columns.

State Data

The US State data contains two additional columns: state and fips. A FIPS code is a geographic identifier that we will not use for this project.

date,state,fips,cases,deaths
...
2020-02-06,Washington,53,1,0
2020-02-06,Wisconsin,55,1,0
2020-02-07,Arizona,04,1,0
2020-02-07,California,06,6,0
...

County Data

The US County Data contains a county column in addition to all the columns found in the state data:

date,county,state,fips,cases,deaths
...
2020-02-01,Orange,California,06059,1,0
2020-02-01,Santa Clara,California,06085,1,0
2020-02-01,Cook,Illinois,17031,2,0
2020-02-01,Suffolk,Massachusetts,25025,1,0
2020-02-01,Snohomish,Washington,53061,1,0
...

Parsing the data

We will use Papaprse to parse the csv data directly in the browser. For our first attempt we'll render the US state data in the browser using innerHTML, so we can see can see how parsing works. You can head on to the codesandbox to see the result.

The shape of the data

The first thing you'll notice in the example is a Typescript interface:

interface StateCaseData {
  date: string;
  state: string;
  cases: number;
  deaths: number;
}

An interface defines the shape of some data, regardless of the source. In this instance, we are receiving the data from a CSV file that is downloaded and then parsed. Having looked at the raw CSV containing the US state data, we can assume that the data will be parsed into an array of objects that conform to the StateCaseData interface.

The parse result

Once we have imported Papaparse:

import ParseCSV from "papaparse";

we can call the parse method, providing the URL for the US State data csv and an object containing additional arguments:

ParseCSV.parse(US_CSV_URL, {
  download: true,
  header: true,
  dynamicTyping: true,
  complete: parseResult => {
    console.log("errors: ", parseResult.errors);
    const data = parseResult.data.filter(isStateCaseData);
    renderStateData(data);
  }
});

These are the arguments contained in the object:

download: indiates that the file needs to be downloaded
header: indicates that the first row in the file contains the column names
dynamicTyping: indicates that we'd like Papaparse to convert numbers and booleans to their respective types, rather than converting them to strings.
complete: a callback that describes what we'd like to do once the parsing is done. Paparse will invoke this callback with a results object which contains a data property - an an array of objects keyed by the field name. It also contains an errors property, an array of string. At at the moment of writing this array is empty, meaning there are no errors parsing the CSV.

A few words about parsing the data property in the parseResult. Earlier I said we can assume that each object in the data parsed from the CSV will conform to the StateCaseData interface. But we don't want to assume that the data will always be correct. In fact, the type of parseResult.data is defined as any[] - an array where the elements may be of any type whatsover. What if some of the elements in this array are missing a cases or state property? What we want is to only keep those objects that actually confrom to the StateCaseData interface, and discard the rest. We can do this by defining a function called isStateCaseData that, when given an element as an argument, returns true if it conforms to the StateCaseData interface and false otherwise:

function isStateCaseData(dataElem: any): data is StateCaseData {
  return (
    !!dataElem &&
    isString(dataElem.date) &&
    isString(dataElem.state) &&
    isNumber(dataElem.cases) &&
    isNumber(dataElem.deaths)
  );
}

const isString = (value: any): value is String => typeof value === "string";

const isNumber = (value: any): value is Number => typeof value === "number";

The return type of isStateCaseData is a type predicate. This function is in fact a type guard - a function that returns a boolean indicating if the argument passed to it is of the stated type. To determine if the type dataElem is StateCaseData or not, we need check the types of each of its properties: date and state must be strings; cases and deaths must be numbers. These type checks are performed via their own type guards: isString and isNumber. But first we need to verify that the argument is not null or undefined - if that is the case, trying to access any property will result in a runtime error. We verify this by using double bangs, which will coerce the argument to a boolean. If the argument is null or undefined, it will be coerced to false, and the check will be short-circuited.

Going back to where we filter the parseResult data:

const data = parseResult.data.filter(isStateCaseData);

If we hover over data we'll see that Typescript has inffered the type as StateCaseData[] - we have validated that each element in the list is of StateCaseData type. Finally, we can render the data by passing it to the renderStateData function. This function simply iterates over the data array and renders the values of date, state, and cases of each element.

This completes the first part of the series. In the next part we will group the data in a way that allows us to render it into charts and <select> elements.

Implementing the useState Hook

Lev Izraelit — Sun, 08 Dec 2019 04:27:16 +0000

Introduction

I felt uneasy the first time I read about hooks in React. Their inner workings seemed too magical. I remember looking at a simple example and trying to make sense of how it worked under the hood:

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
        The count is: {count}
        <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

It was clear what the example was doing. You click the + button, and the count is incremented. But where was the value of count being stored, and how were we getting the correct value, even though 0 was passed every time? Even as I started incorporating hooks into my apps, I had few clear answers. So I started searching for sources that described how hooks work under the hood. Finally, I decided to try and reimplement some of the core hooks myself.

This post details my process of reimplementing the useState hook. For me, the goal was never to exactly match the real implementation. The goal was to gain some insight into how some like useState can be implemented.

Classes and state

Generally speaking, state includes any value that changes over time, when that value needs to be remembered by the program. For React class components, the concept of state is translated directly into the state object. The idea is to encapsulate all (or at least most) of the changing values in one place. We initialized the state object with some default values when the class is created, and then modify these values indirectly by calling the setState method:

class Counter extends React.Component {
    constructor() {
      this.state = {
        count: 0
      }
    }

    increment = () => {
      this.setState({
        count: this.state.count + 1
      }) 
    }

    render() {
      return (
        <>
          <div>count: {this.state.count}</div>
          <button onClick={this.increment}>+</button>
        </>
      )
    }
}

The setState method recreates the component's state by merging the existing state with the new object that was passed as an argument. If we were to implement the base setState, it would look something like this:

  setState(newPartialState) {
    this.state = {
      ...this.state,
      ...newPartialState
    }
    // rerender the component
  }

Functions and State

Unlike an object or class, a function cannot internally maintain state. This is the reason, in React, that a functional component is also called a stateless functional component. So I'd come to expect a functional component to work the same way as a simple add function - given the same input, I would expect to always get the same output. If I needed state, I would have to create a parent class component, and have that component pass down the state:

// The Counter functional component will receive 
// the count and a setCount function 
// from a parent class component
const Counter = ({ count, setCount }) => (
  <>
    <div>count: {count}</div>
    <button onClick={() => setCount(count + 1)}>+</button>
  </>
)

class CounterContainer extends React.Component {
  // shorthand for using a constructor
  state = {
    count: 0
  }

  setCount = (newCount) => {
    this.setState({
      count: newCount
    }) 
  }

  render() {
    return (
      <Counter count={this.state.count} setCount={this.setCount}>
    )
  }
}

In a sense, the useState hook gives us a way to tell React that we need something like that parent class component, without having to create it ourselves. We simply tell React that we want to use state, and React will create that state for us.

Functions that use state

As a first attempt around creating a parent class component, we could try and have a function component directly modify a global variable:

let count = 0;

const Counter = () => (
  <>
    <div>{count}</div>
    <button onClick={() => count++}>+</button>
  </>
)

This, however, doesn't quite work. Even though value of count is changing, the Counter component does not re-render to show the new value. We stil need something similar to a setState call, which would rerender the component when the value of count changes. We can make a setCount function that does just that:

let count = 0

function setCount(newCount) {
  count = newCount
  ReactDOM.render(<Counter />)
}

const Counter = () => (
  <>
    <div>{count}</div>
    <button onClick={() => setCount(count++)}>+</button>
  </>
)

This works! To ensure count and setCount are always used together, we can put them inside an object. Let's call this object MyReact:

const MyReact = {
  count: 0,
  setCount(newCount) {
    this.count = newCount;
    ReactDOM.render(<Counter />)
  }
}

To make things even clearer, let's create a useCount function that returns an object with count and setCount:

  useCount() {
    return { 
      count: this.count,
      setCount: this.setCount
    }
  }

Next, we would want to allow the caller of useCount to pass an initial value. This presented us with a problem. we only need to set the initial value on the very first time that useCount is called. On any subsequent call, we would want use the existing value of useCount. One solution is adding a stateInitialized variable. We'll initially set it to false, and set it to true on the first time that useCount is called:

  stateInitialized: false,
  useCount(initialValue) {
    if (!this.stateInitialized) {
      this.count = initialValue;
      this.stateInitialized = true;
    }
    // ...
  }

Now that we got the basics working, we can make MyReact more general by renaming the count variable to state, and the method names to useState and setState. Also, we'll return state and setState in an array, to allow for easy renaming:

const MyReact = {
  state: null,
  stateInitialized: false,
  setState(newState) {
    this.state = newState;
    ReactDOM.render(<Counter/>, rootElement);
  },
  useState(initialValue) {
    if (!this.stateInitialized) {
      this.stateInitialized = true;
      this.state = initialValue;
    }
    return [this.state, this.setState];
  }
};

const Counter = () => {
  const [count, setCount] = MyReact.useState(0)
  // ...
}

We can also added a render method to MyReact, and call this method instead of calling ReactDOM.render. This will allow us to save the Counter component as part of MyReact:

  // ...
  setState(newState) {
    this.state = newState;
    ReactDOM.render(<this.component/>, this.rootElement);
  },
  // ...
  render(component, rootElement) {
    this.component = component;
    this.rootElement = rootElement;
    ReactDOM.render(<this.component/>, this.rootElement);
  }
  // ..

// later 
MyReact.render(Counter)

Multiple state variables

The next step is to enable MyReact to manage multiple variables. The first step is to replace the single state variable with an array of state variables. Now we would need some way to know, each time setState was being called, which state variable is the one that needs to change. We can achieve this by relying on the call order to useState. Take, for example, the two subsequent calls below:

const MyCounter = () => {
  const [count, setCount] = MyReact.useState(0);
  const [name, setName] = MyReact.useState("");
}

The MyReact.useState methods would always be executed in the same order, first returning the values of count1, setCount1, and then returning the values of name, setName. This will be the case as as long as MyReact.useState is not called inside conditional block, where the condition isn't always true or false.

Now, since we have two or more state variables, each state variable will need to have a corresponding setState method. We can achieve this by using an array of objects, where object stores the state value and the corresponding setState method. We can call each of the objects a statePair and the arrays that holds them stateArray.

[{ value: count, setCount }, { value: name, setName }, ...]

We now need a way to track which element of the array is being used at any given time. For example, having the two calls to MyReact.useState above, the first call should return the [count, setCount] and the second call should return [name, setName]. We can use a variable to track this value. Let's call this variable currentStateIndex.

The currentStateIndex will be reset to 0 whenever any setState is called. When the value of currentStateIndex becomes equal to the length of the array, we will create a new pair of state an setState.

const MyReact = {
  stateArr: [],
  currentStateIndex: 0,
  component: null,
  useState(initialValue) {
    // if we reached beyond the last element of the array
    // We will need create a new state
    if (this.currentStateIndex === this.stateArr.length) {
      const statePair = {
        value: initialValue,
        setState(newValue) {
          statePair.value = newValue;
          MyReact.currentStateIndex = 0;
          ReactDOM.render(<MyReact.component />, rootElement);
        }
      };

      this.stateArr.push(statePair);
    }
    // get the current state and setState before incrementing the index
    const currentStatePair = this.stateArr[this.currentStateIndex];
    this.currentStateIndex += 1;
    return [currentStatePair.value, currentStatePair.setState];
  },
  render(component, rootElement) {
    this.component = component;
    this.rootElement = rootElement;
    ReactDOM.render(<this.component />, this.rootElement);
  }
};

Example

Given the above implementation, let's try and follow an example of a component that uses two state variables:

const Counter = () => {
  const [count1, setCount1] = MyReact.useState(0);
  const [count2, setCount2] = MyReact.useState(0);
  return (
    <>
      <div>
        The first count is: {count1}
        <button onClick={() => setCount1(count1 + 1)}>+</button>
      </div>
      <div>
        The second count is: {count2}
        <button onClick={() => setCount2(count2 + 1)}>+</button>
      </div>
    </>
  )
}

MyReact.render(Counter)

Below is a sandbox with MyReact and the Counter component:

Following the example, these would be the inital values of MyReact:

MyReact {  
  stateArr: [],
  currentStateIndex: 0,
  component: null,
}

After the first call to useState:

const Counter = () => {
  const [count1, setCount1] = MyReact.useState(0); // <--

The values of MyReact will be:

MyReact {  
  stateArr: [{ value: 0, setState: fn() }],
  currentStateIndex: 1,
  component: Counter,
}

After the second call to useState:

const Counter = () => {
  const [count1, setCount1] = MyReact.useState(0); 
  const [count2, setCount2] = MyReact.useState(0); // <--

The values of MyReact will be:

MyReact {  
  stateArr: [{ value: 0, setState: fn() }, { value: 0, setState: fn() }],
  currentStateIndex: 2,
  component: Counter,
}

Now, if the first + button is pressed, the values of MyReact would become:

MyReact {  
  stateArr: [{ value: 1, setState: fn() }, { value: 0, setState: fn() }],
  currentStateIndex: 0,
  component: Counter,
}

Which would lead to Counter being rendered again. On the subsequent calls to useState, only the currentStateIndex will be incremented, while the existing elements of stateArr will be returned.

Conclusion

So, we've arrived at something pretty similar to React's useState hook. I cannot say if understanding the internal workings of hooks would make someone a better React developer. But I do feel that is is worthwhile to try and understand how abstractions can be created - this can help us better understand the ones that have already been made, and to make new abstractions of our own.