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

# useAddTodo

We create a hook that returns a callback function which allows us to add a new ToDo item.

```javascript
// ./hooks/useAddTodo.js

import { useCallback } from 'react';
import { useSetDraft } from '../store';

let nextId = 100;

export const useAddTodo = () => {
  const setDraft = useSetDraft();
  return useCallback(
    title => {
      setDraft(draft => {
        draft.todos.push({ id: nextId++, title });
      });
    },
    [setDraft],
  );
};
```

With `setDraft` we can mutate the draft state. The `nextId` is defined outside of the hook to provide a unique ID every time the callback is called.

We explicitly use `useCallback` for returning the stable callback. It's not necessary if we are sure that stability is not important. But, we don't know at this point if the callback function will be passed for props of child components that are wrapped by React.memo. Hence, it's a safe bet to always use `useCallback` in custom hooks.

# Next

We continue to create another hook. In the next lesson, we learn to create `useDeleteTodo`.

In this lesson, we create a hook to add a new ToDo item.

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

useAddTodo Hook

useAddTodo