React DevTools tells you why a component rendered. This tells you what updated with it.

React DevTools, why-did-you-render, and React Scan answer a useful question: why did this component render?

They do not answer a different one that shows up in real apps:

What updated, what updated with it, and what looks upstream?

That is what react-state-basis is for.

It is a dev-time diagnostic. It records when state writes land - not the values - and flags repeated timing patterns: extra frames, correlated flags, context copies, and update fan-out.

Live playground: StackBlitz demo - pick a scene, open the preview console.

The problem it looks at

This is legal React and still a common source of extra paints:

const [a, setA] = useState(0);
const [b, setB] = useState(0);

useEffect(() => {
  setB(a + 1);
}, [a]);

Click the button a few times. Basis typically reports:

⚡ BASIS | DOUBLE RENDER
📍 Location: YourComponent.tsx
Issue: effect_L5 triggers b in a separate frame.
Fix: Derive b during the render phase (remove effect) or wrap in useMemo.

That “Fix:” line is a prompt from a rolling frame window, not a proof. Repeat the interaction and see whether the pattern holds.

Same idea for flags that always move together (isLoading