Modifying the Counter App with React Tracked

In this lesson, we use React Tracked in the counter app and see how it behaves.

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.

Create a free account to view this lesson.

By signing up, you agree to Educative's Terms of Service and Privacy Policy