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.