react-state-management

To minimize re-renders in React, place state at the lowest leaf component that owns it and lift only when sibling components need shared access. This localizes re-render scope and improves overall component maintainability.

Avoid derived or contradictory React state by storing only minimal essential state and computing derived values on the fly during render. This prevents bugs where multiple state variables fall out of sync during updates.

Use discriminated unions to model React async fetch state, enforcing mutually exclusive loading, success, and error variations. This eliminates invalid state combinations and guarantees safe data flow transitions.

Lift React state up only when multiple sibling components need to read or update the same shared data. If state is used by a single component, keep it localized there to avoid triggering unnecessary re-renders higher in the tree.

Design scalable React component hierarchies by applying leaf-state placement, keeping minimal essential state, and hoisting stable values outside components. This architecture guides predictable data flow and limits re-render blast radius.

Lifting React state causes extra re-renders because higher-level components holding the state re-render on every update, forcing all child components in the subtree to re-render even if they don't depend on the changed data.