Developers often blame rendering for sluggish React apps, reaching for memoization and hooks like useCallback. However, the real culprit is frequently state design. React excels at re-rendering; the actual cost comes from what triggers those updates and their cascading impact on the component tree. Poor state management creates bottlenecks that look like rendering issues but stem from data flow.

Performance problems arise when state is lifted too high, tightly coupled, or mutated indirectly. A common anti-pattern is global state that changes frequently, forcing React to re-evaluate massive subtrees. This creates a data ownership problem rather than a rendering one. Well-structured apps keep state local, compute derived data on demand, and let cheap, isolated renders run freely without fear.

Premature optimization adds complexity without fixing the root cause. Dependency arrays and stale values introduce headaches when the real issue is unclear state boundaries. Instead of asking how to prevent re-renders, developers should ask why a state change affects so much of the app. Solving that architectural question often eliminates the need for manual optimization entirely.