react-patterns

Build composable React components using compound patterns that share implicit state via children or slots. This composition-first architecture keeps components small, focused, and avoids prop drilling overload and context sprawl anti-patterns.

Reserve useEffect for synchronizing with external systems, not for deriving computed values. Keep state near where it is used and derive computed values directly during render instead of storing them in state or syncing them through large effects.

Optimize React performance by applying memoization rules using React.memo, useMemo, and useCallback. For large lists, apply scalability techniques like code splitting and virtualization to reduce re-render churn and rendering workloads.

Storing derived state in React component state causes bugs and unnecessary re-render churn because it duplicates data. You should derive computed values directly during render instead of storing them, avoiding the derived state in state anti-pattern.

Applying React memoization to every component causes over-optimization. You should follow strict memoization strategy selection rules, applying React.memo, useMemo, and useCallback only where they prevent measurable re-render churn rather than indiscriminately.