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

# useQuery

A query in our app is to filter ToDo items. This hook returns two functions, `setQuery` and `getQuery`

`setQuery` is a function to update `query`, while `getQuery` is a function to read `query`.

```javascript
// ./hooks/useQuery.js

import { useCallback } from 'react';
import { useTrackedState, useSetDraft } from '../store';
export const useQuery = () => {
  const state = useTrackedState();
  const getQuery = () => state.query;
  const setDraft = useSetDraft();
  const setQuery = useCallback(
    query => {
      setDraft(draft => {
        draft.query = query;
      });
    },
    [setDraft],
  );
  return { getQuery, setQuery };
};
```

There is an important note here: The reason we use `getQuery` is because we used React Tracked. If we just used the bare React context, we could simply do the following:

```javascript
return {
  query: state.query,
  setQuery,
};
```

If we do this with React Tracked, `query` is always marked as "used" when using this hook because it accesses the `query` property of the state inside the hook.

Another recommended pattern is that `useQuery` only returns `setQuery` and is named `useSetQuery`. Another pattern could be that you use `state.query` directly in components.

# Next

In the next lessons, we learn how to create components with the hooks we created.


In this lesson, we create a hook to handle queries.

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

useQuery Hook

useQuery