Modifying the Counter App with React Tracked

Installing React Tracked

In this course, the platform already has React Tracked installed.

If you run the code locally, please follow the instructions here.

Modify code

Previously, we had the following code for our counter app:

const Context = createContext(null);
 
const useGlobalState = () => {
  const value = useContext(Context);
  if (value === null) throw new Error('Please add GlobalStateProvider');
  return value;
};
 
const GlobalStateProvider = ({ children }) => (
  <Context.Provider value={useValue()}>{children}</Context.Provider>
);

This creates a context, a hook, and a provider.

In React Tracked, this is done by createContainer.

import { createContainer } from 'react-tracked';

const {
  useTracked: useGlobalState,
  Provider: GlobalStateProvider,
} = createContainer(useValue);

Notice we simply rename a hook and a provider from the default names in a container.

Check the app

Now, let’s try the modified app.