Repository files navigation

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 visitreactive-react-redux which has the same hooks API.

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 useContextwill re-render.React idiomatic usage of the Context API isto separate concerns into pieces and use multiple contexts.If each context value is small enough, there shouldn't beany performance issue.

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

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

npm install react-tracked

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

importReact,{useReducer}from'react';importReactDOMfrom'react-dom';import{createContainer}from'react-tracked';constuseValue=({ reducer, initialState})=>useReducer(reducer,initialState);const{ Provider, useTracked}=createContainer(useValue);constinitialState={count:0,text:'hello',};constreducer=(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:thrownewError(`unknown action type:${action.type}`);}};constCounter=()=>{const[state,dispatch]=useTracked();return(<div>{Math.random()}<div><span>Count:{state.count}</span><buttontype="button"onClick={()=>dispatch({type:'increment'})}>+1</button><buttontype="button"onClick={()=>dispatch({type:'decrement'})}>-1</button></div></div>);};constTextBox=()=>{const[state,dispatch]=useTracked();return(<div>{Math.random()}<div><span>Text:{state.text}</span><inputvalue={state.text}onChange={event=>dispatch({type:'setText',text:event.target.value})}/></div></div>);};constApp=()=>(<Providerreducer={reducer}initialState={initialState}><h1>Counter</h1><Counter/><Counter/><h1>TextBox</h1><TextBox/><TextBox/></Provider>);ReactDOM.render(<App/>,document.getElementById('app'));

React context by nature triggers propagation of component re-renderingif a value is changed. To avoid this, this libraries use undocumentedfeature ofcalculateChangedBits. It then uses a subscription modelto force update when a component needs to re-render.

docs/api

docs/recipes

docs/caveats

docs/comparison

https://github.com/dai-shi/lets-compare-global-state-with-react-hooks

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

PORT=8080 npm run examples:01_minimal

and openhttp://localhost:8080 in your web browser.

You can also try them in codesandbox.io:01020304050607080910111213

Seethis for details.

• Super performant global state with React context and hooks
• Redux-less context-based useSelector hook that has same performance as React-Redux
• Four different approaches to non-Redux global state libraries
• What is state usage tracking? A novel approach to intuitive and performant global state with React hooks and Proxy
• How to use react-tracked: React hooks-oriented Todo List example
• Effortless render optimization with state usage tracking with React hooks
• 4 options to prevent extra rerenders with React context
• React Tracked Documentation Website with Docusaurus v2