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

# Try demo

We simply put together all the code from previous lessons. Run it, and see how it works.

import { useReducer } from 'react';
import { createContainer } from 'react-tracked';
 
const initialState = {
  todos: [
    { id: 1, title: 'Wash dishes' },
    { id: 2, title: 'Study JS' },
    { id: 3, title: 'Buy ticket' },
  ],
  query: '',
};
 
let nextId = 4;
 
const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, { id: nextId++, title: action.title }],
      };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter(todo => todo.id !== action.id),
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map(todo =>
          todo.id === action.id
            ? { ...todo, completed: !todo.completed }
            : todo,
        ),
      };
    case 'SET_QUERY':
      return {
        ...state,
        query: action.query,
      };
    default:
      return state;
  }
};
 
const useValue = () => useReducer(reducer, initialState);
 
export const {
  Provider,
  useTrackedState,
  useUpdate: useDispatch,
} = createContainer(useValue);

import React from 'react';
import { useDispatch, useTrackedState } from './store';
 
import TodoItem from './TodoItem';
import NewTodo from './NewTodo';
 
const TodoList = () => {
  const dispatch = useDispatch();
  const state = useTrackedState();
  const setQuery = event => {
    dispatch({ type: 'SET_QUERY', query: event.target.value });
  };
  return (
    <div>
      <ul>
        {state.todos.map(({ id, title, completed }) => (
          <TodoItem key={id} id={id} title={title} completed={completed} />
        ))}
        <NewTodo />
      </ul>
      <div>
        Highlight Query for incomplete items:
        <input value={state.query} onChange={setQuery} />
      </div>
    </div>
  );
};
 
export default TodoList;

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);

import React, { useState } from 'react';
 
import { useDispatch } from './store';
import { useFlasher } from './utils';
 
const NewTodo = () => {
  const dispatch = useDispatch();
  const [text, setText] = useState('');
  const addTodo = () => {
    dispatch({ type: 'ADD_TODO', title: text });
    setText('');
  };
  return (
    <li ref={useFlasher()}>
      <input
        value={text}
        placeholder="Enter title..."
        onChange={e => setText(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>
    </li>
  );
};
 
export default React.memo(NewTodo);

import React from 'react';
 
import { Provider } from './store';
import TodoList from './TodoList';
 
const App = () => (
  <Provider>
    <TodoList />
  </Provider>
);
 
export default App;

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);


import { useEffect, useRef } from 'react';

export const useFlasher = () => {
  const ref = useRef(null);
  useEffect(() => {
    ref.current.classList.add('flash');
    setTimeout(() => {
      ref.current.classList.remove('flash');
    }, 300);
  });
  return ref;
};

button {
  margin-left: 5px;
}

.flash {
  box-shadow: 0 0 2px 1px red;
  transition: box-shadow 100ms ease-out;
}

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

# How to confirm render optimization

The highlight query is only effective against incomplete ToDo items. This means that complete items do not update with the query change.

You can try it with the following steps.
1. Click checkboxes of some items that will make those items complete. Complete items are shown with a line through them.
2. Type some characters in the query field at the bottom.
3. You will see only incomplete items (not shown with a line through) re-render (become bold).

# Next

In the next chapter, we create the same ToDo app in a more structured way.


In this lesson, we demonstrate the ToDo app.

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

Demo

Try demo