react-state

React state management works by treating the UI as a function of state, where the component output is determined entirely by the current state and props during that specific render. This mental model ensures the interface remains predictable and synchronized with underlying data.

You should use useReducer instead of useState when React component state involves multiple sub-values that depend on each other, or when the next state depends on complex transitions. This approach provides a more predictable state management decision framework than multiple independent useState hooks.

You get stale closures in React useEffect because each render has its own everything, capturing variables from the render scope where the effect was created. Fix them by applying the Just JavaScript mental model, ensuring the effect correctly recognizes the UI as a function of state.

Composition over configuration in React component design is a pattern advocating for building complex interfaces by combining smaller, focused components rather than relying on extensive configuration props. This inversion of control prevents premature abstraction and maintains flexible component APIs.

Common React hooks anti-patterns to avoid include premature abstraction, unnecessary memoization, and misusing useEffect for data synchronization rather than side effects. Applying Dan Abramov's mental models helps identify these pitfalls and establishes a clear decision framework for correct hooks philosophy.

You need to understand Just JavaScript thinking to build React components correctly because it clarifies that React is fundamentally standard JavaScript. Mastering these mental models clarifies render isolation and state management, leading to more robust and maintainable frontend development.