// the find
dai-shi/react-tracked
State usage tracking with Proxies. Optimize re-renders for useState/useReducer, React Redux, Zustand and others.
A small library that wraps any hook returning a state tuple, or any selector hook such as react-redux's useSelector or Zustand's store hook, so a component re-renders only when the properties it actually reads change. It suits React apps with one large shared state object that have hit re-render problems and want to keep the store they already have.
- The surface is two functions. createContainer wraps a useState or useReducer hook, and createTrackedSelector wraps an existing selector hook. Adopting it on a Redux or Zustand store changes the call sites and leaves the store alone.
- Tracking works on nested objects, not just the root, so reading state.user.profile.name subscribes to that path. That is what makes the Proxy approach more useful than hand-written selectors for deep state.
- Each example app has a browser e2e spec with a snapshot in tests/e2e, covering forms, async, saga and a todo list. For a library whose claim is about render counts, that is the right kind of test to have.
- Tracking only sees property reads during render. Values read inside effects, callbacks or event handlers do not register, so anyone who expects the subscription to follow every access will be surprised. The README moves the caveats to a separate page, so the sharp edges are not in front of you on first read.
- The README concedes that the library sits on use-context-selector and that React 18 changed useReducer behavior in a way that can produce extra console.log output. Its workaround is to move the log into useEffect and accept that the extra renders are expected, which is an explanation rather than a fix.
- The Zustand snippet uses `import create from 'zustand'`, the default export that zustand removed in v4, and the last push was in May 2026. Check the docs against current zustand and React versions before copying the examples.