Understanding React Tracked

We have been learning about several global state libraries, but React Tracked is slightly different from the ones we have learned about so far. React Tracked doesn't provide state functionality, but what it does provide is render optimization functionality. We call this functionality state usage tracking.

Let's recap how React Context behaves because one of the use cases of state usage tracking in React Tracked is for a React Context.

Suppose we define a Context with createContext as follows:

const NameContext = createContext([
  { firstName: 'react', lastName: 'hooks' },
  () => {},
]);

createContext takes an initial value, which is an array in this case. The first item in the array is an initial state object. The second item in the array, () => {}, is a dummy updating function.

The reason we put such an array as the initial value is to match the return value of useState. We often define...