Skip to content
Super fast React global/shared state with context and hooks
Branch: master
Clone or download
Latest commit d06c3fc Jun 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ rename to simple provider Jun 13, 2019
dist fix renaming Jun 14, 2019
examples customhook example Jun 14, 2019
src fix renaming Jun 14, 2019
.eslintrc.json initial commit with code Jun 12, 2019
.gitignore initial commit with code Jun 12, 2019
.travis.yml initial commit with code Jun 12, 2019
CHANGELOG.md v0.4.0 Jun 14, 2019
README.md update README Jun 20, 2019
package-lock.json v0.4.0 Jun 14, 2019
package.json customhook example Jun 14, 2019
tsconfig.json initial commit with code Jun 12, 2019
webpack.config.js initial commit with code Jun 12, 2019

README.md

react-tracked

Build Status npm version bundle size

Super fast React global/shared state with context and hooks

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)

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

import { Provider, useTracked } from 'react-tracked';

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

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

const useValue = () => useReducer(reducer, initialState);

const Counter = () => {
  const [state, dispatch] = useTracked();
  return (
    <div>
      {Math.random()}
      <div>
        <span>Count:{state.counter}</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 useValue={useValue}>
    <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.

API

Provider

const useValue = () => useReducer(...); // any custom hook that returns a tuple
const App = () => (
  <Provider useValue={useValue}>
    ...
  </Provider>
);

useDispatch

const Component = () => {
  const dispatch = useDispatch(); // simply to get the second one of the tuple
  // ...
};

useSelector

const Component = () => {
  const selected = useSelector(selector); // same API in react-redux
  // ...
};

useTrackedState

const Component = () => {
  const state = useTrackedState(); // same API in reactive-react-redux
  // ...
};

useTracked

const Component = () => {
  const [state, dispatch] = useTracked(); // combination of useTrackedState and useDispatch
  // ...
};

createContainer

const {
  Provider,
  useDispatch,
  useSelector,
  useTrackedState,
  useTracked,
} = createContainer(useValue); // create all APIs bound with new context

Examples

The examples folder contains working examples. You can run one of them with

PORT=8080 npm run examples:minimal

and open http://localhost:8080 in your web browser.

You can also try them in codesandbox.io: 01 02 03 04 05 06

Related projects

comparison table

See #1 for details.

Blogs

You can’t perform that action at this time.