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

# TodoItem

We create a TodoItem component, based on several hooks we created: `useQuery`, `useDeleteTodo`, `useToggleTodo`, and `useFlasher`

```javascript
import React from 'react';

import { useDispatch, useTrackedState } from './store';
import { useFlasher } from './utils';

const renderHighlight = (title, query) => {
  if (!query) return title;
  const index = title.indexOf(query);
  if (index === -1) return title;
  return (
    <React.Fragment>
      {title.slice(0, index)}
      <b>{query}</b>
      {title.slice(index + query.length)}
    </React.Fragment>
  );
};

const TodoItem = ({ id, title, completed }) => {
  const dispatch = useDispatch();
  const state = useTrackedState();
  const delTodo = () => {
    dispatch({ type: 'DELETE_TODO', id });
  };
  return (
    <li ref={useFlasher()}>
      <input
        type="checkbox"
        checked={!!completed}
        onChange={() => dispatch({ type: 'TOGGLE_TODO', id })}
      />
      <span
        style={{
          textDecoration: completed ? 'line-through' : 'none',
        }}
      >
        {completed ? title : renderHighlight(title, state.query)}
      </span>
      <button onClick={delTodo}>Delete</button>
    </li>
  );
};

export default React.memo(TodoItem);
```

This component receives 3 props: `id`, `title`, and `completed`. They are all primitive values. An alternative way is to receive 1 prop, `todo` object.

This is specific to React Tracked, but there's a pitfall with object props if you use [React.memo](https://reactjs.org/docs/react-api.html#reactmemo). With React Tracked, we recommend primitive props for components that are wrapped by `React.memo`. If one needs object props there's a workaround, but it's out of the scope of this course.

# Next

In the next lesson, we create `NewTodo` component.

# TodoItem

We create a TodoItem component, based on several hooks we created: `useQuery`, `useDeleteTodo`, `useToggleTodo`, and `useFlasher`

```javascript
import React from 'react';

import { useDispatch, useTrackedState } from './store';
import { useFlasher } from './utils';

const renderHighlight = (title, query) => {
  if (!query) return title;
  const index = title.indexOf(query);
  if (index === -1) return title;
  return (
    <React.Fragment>
      {title.slice(0, index)}
      <b>{query}</b>
      {title.slice(index + query.length)}
    </React.Fragment>
  );
};

const TodoItem = ({ id, title, completed }) => {
  const dispatch = useDispatch();
  const state = useTrackedState();
  const delTodo = () => {
    dispatch({ type: 'DELETE_TODO', id });
  };
  return (
    <li ref={useFlasher()}>
      <input
        type="checkbox"
        checked={!!completed}
        onChange={() => dispatch({ type: 'TOGGLE_TODO', id })}
      />
      <span
                 textDecoration: completed ? 'line-through' : 'none',
        }}
      >
        {completed ? title : renderHighlight(title, state.query)}
      </span>
      <button onClick={delTodo}>Delete</button>
    </li>
  );
};

export default React.memo(TodoItem);
```

This component receives 3 props: `id`, `title`, and `completed`. They are all primitive values. An alternative way is to receive 1 prop, `todo` object.

This is specific to React Tracked, but there's a pitfall with object props if you use [React.memo](https://reactjs.org/docs/react-api.html#reactmemo). With React Tracked, we recommend primitive props for components that are wrapped by `React.memo`. If one needs object props there's a workaround, but it's out of the scope of this course.

# Next

In the next lesson, we create `NewTodo` component.

In this lesson, we create a TodoItem component that displays one item in the list.

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

TodoItem Component

TodoItem