Discover how React Tracked optimizes render performance in web apps. Build a to-do app using two methods, and gain skills to create advanced applications efficiently.

React Tracked is a small library for global state with React Hooks and
React Context. It allows you to develop a small web app with global state
without a bigger library like Redux.

In this course, you will create a to-do app. But before diving into
creating an application, you’ll first learn how React Tracked can solve
common performance issues around render optimization. Once you learn how to
work with this library, you’ll then build a to-do app through two different
methods.

By the end of this course, you will be ready to build more advanced
applications without having to do unnecessary re-rendering. You’ll also
have a nice piece to showcase in your portfolio.

React Tracked: Creating Web Apps with Global State

# Initial state

The initial state is the same as in the previous lessons.

```javascript
const initialState = {
  todos: [
    { id: 1, title: 'Wash dishes' },
    { id: 2, title: 'Study JS' },
    { id: 3, title: 'Buy ticket' },
  ],
  query: '',
};
```

# useValue

The initial state is only needed for `useState`.

```javascript
const useValue = () => useState(initialState);
```

# createContainer

We create a store with `createContainer`.

```javascript
const {
  Provider,
  useTrackedState,
  useUpdate: useSetState,
} = createContainer(
  useValue,
);
```

Notice we renamed `useUpdate` to `useSetState`.

# useSetDraft

Now, we create a wrapper function on `useSetState`.

```javascript
const useSetDraft = () => {
  const setState = useSetState();
  return useCallback(
    draftUpdater => {
      setState(produce(draftUpdater));
    },
    [setState],
  );
};
```

This `useSetDraft` uses [Immer](https://github.com/immerjs/immer)'s `produce`. Immer allows a mutating draft state while we get an immutably updated state in the end.

# The entire store file

Our `store.js` is simply the concatenation of what we defined above.

```javascript
// store.js

import { useState, useCallback } from 'react';
import { createContainer } from 'react-tracked';
import produce from 'immer';

const initialState = {
  todos: [
    { id: 1, title: 'Wash dishes' },
    { id: 2, title: 'Study JS' },
    { id: 3, title: 'Buy ticket' },
  ],
  query: '',
};

const useValue = () => useState(initialState);

const { Provider, useTrackedState, useUpdate: useSetState } = createContainer(
  useValue,
);

const useSetDraft = () => {
  const setState = useSetState();
  return useCallback(
    draftUpdater => {
      setState(produce(draftUpdater));
    },
    [setState],
  );
};

export { Provider, useTrackedState, useSetDraft };
```

# Next

Let's create various custom hooks based on the store.

In the next lesson, we create the first `useTodoList` hook.

In this lesson, we learn a different pattern with useState and custom hooks, create a store in a couple of lines, and also make use of Immer.

Creating a Counter App only with React Context

Introducing React Tracked to the Counter App

Developing ToDo App with React Tracked and useReducer

Developing ToDo App with React Tracked, useState and Immer

Going Further

Simple Store with useState

Initial state #