React Tracked

Simple and fast global state with React Context. Eliminate unnecessary re-renders without hassle.

Documentation site: https://react-tracked.js.org

If you are looking for a Redux-based library, please visit reactive-react-redux which has the same hooks API.

Introduction

React Context and useContext is often used to avoid prop drilling, however it's known that there's a performance issue. When a context value is changed, all components that useContext will re-render. React idiomatic usage of the Context API is to separate concerns into pieces and use multiple contexts. If each context value is small enough, there shouldn't be any performance issue.

What if one wants to put a bigger state object into a context for various reasons? React Redux is one solution in this field. Redux is designed to handle one big global state, and React Redux optimizes that use case.

This library tosses a new option. It's based on Context and typically with useReducer, and provides APIs to solve the performance issue. Most notably, it comes with useTrackedState, which allows optimization without hassle. Technically, it uses Proxy underneath, and it tracks state usage in render so that if only used part of the state is changed, it will re-render.

Install

npm install react-tracked

Usage (useTracked)

The following shows a minimal example. Please check out others in the examples folder.

import React, { useReducer } from 'react';
import ReactDOM from 'react-dom';

import { createContainer } from 'react-tracked';

const useValue = ({ reducer, initialState }) => useReducer(reducer, initialState);
const { Provider, useTracked } = createContainer(useValue);

const initialState = {
  count: 0,
  text: 'hello',
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment': return { ...state, count: state.count + 1 };
    case 'decrement': return { ...state, count: state.count - 1 };
    case 'setText': return { ...state, text: action.text };
    default: throw new Error(`unknown action type: ${action.type}`);
  }
};

const Counter = () => {
  const [state, dispatch] = useTracked();
  return (
    <div>
      {Math.random()}
      <div>
        <span>Count: {state.count}</span>
        <button type="button" onClick={() => dispatch({ type: 'increment' })}>+1</button>
        <button type="button" onClick={() => dispatch({ type: 'decrement' })}>-1</button>
      </div>
    </div>
  );
};

const TextBox = () => {
  const [state, dispatch] = useTracked();
  return (
    <div>
      {Math.random()}
      <div>
        <span>Text: {state.text}</span>
        <input value={state.text} onChange={event => dispatch({ type: 'setText', text: event.target.value })} />
      </div>
    </div>
  );
};

const App = () => (
  <Provider reducer={reducer} initialState={initialState}>
    <h1>Counter</h1>
    <Counter />
    <Counter />
    <h1>TextBox</h1>
    <TextBox />
    <TextBox />
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('app'));

Technical memo

React context by nature triggers propagation of component re-rendering if a value is changed. To avoid this, this libraries use undocumented feature of calculateChangedBits. It then uses a subscription model to force update when a component needs to re-render.