Transient Updates

Handle high-frequency updates like scroll or mouse tracking without crushing React's render cycle.

State Management6 min readConcept 8 of 22

What are Transient Updates?

If you try to track the user's mouse coordinates by storing them in React state (useState) or a Context Provider, your entire component tree will re-render 60 times per second. Your app will grind to a halt.

Transient updates allow you to read and respond to Zustand state changes *without* triggering a React render cycle. You do this by subscribing to the store directly.

Bypassing the React Render Cycle

React is fast, but it's not meant to handle 60fps continuous data streams if that data doesn't structurally change the DOM.

By using Zustand's subscribe method, you can listen for state changes and update a DOM node directly using a React ref. This bypasses React's virtual DOM diffing entirely, resulting in butter-smooth performance.

Using `store.subscribe`

Every Zustand store exposes a .subscribe() method. You can set this up inside a useEffect.

tsx useEffect(() => { const unsubscribe = useStore.subscribe((state) => { if (ref.current) { // Update the DOM directly! ref.current.innerText = X: ${state.x}, Y: ${state.y}; } }); return unsubscribe; // Cleanup on unmount }, []);

Because we aren't calling useStore() as a hook in the component body, this component will *never* re-render when x or y changes, but the text on the screen will still update.

60FPS Rendering

Watch how a high-frequency "mouse tracking" signal updates the DOM instantly via subscribe and a ref, all while the React render count remains perfectly at zero.

function MouseTracker() { const positionRef = useRef(null); // Proof that React is NOT re-rendering let renderCount = useRef(0); renderCount.current++; useEffect(() => { // Subscribe without triggering re-renders const unsub = useStore.subscribe((state) => { if (positionRef.current) { // Update DOM directly! positionRef.current.innerText = `x: ${state.x}, y: ${state.y}`; } }); return unsub; }, []); return ( <div> <span ref={positionRef}></span> <p>Renders: {renderCount.current}</p> </div> ); }

Mouse Tracker

React Renders1
Tracking Area
Direct Ref Valuex: 0, y: 0

Watch the tracker update 60 times a second. Because we subscribe and update the ref directly, the React Render Count never increases!

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Why would you use useStore.subscribe() instead of the useStore() hook?

Remember this

  • High-frequency state updates (60fps) will destroy React performance if they trigger re-renders.
  • Use useStore.subscribe() inside a useEffect to listen for changes silently.
  • Update DOM nodes directly via a ref inside the subscribe callback.
  • Use useStore.getState() to read the store once without subscribing.

Done with this concept?

Mark it complete to track your progress. No login needed.