React Re-render Mental Models

A practical guide to understanding how React re-renders actually work, debunking common misconceptions, and knowing when optimization is truly needed.

Core Philosophy

"Trust React to be fast. Write simple code. Measure when something actually feels slow. Optimize based on data, not fear."

When to Apply

Reference these guidelines when:

• Writing new React components
• Reviewing code for performance issues
• Deciding whether to add React.memo, useCallback, or useMemo
• Debugging perceived "slowness" in React apps
• Refactoring component architecture

Rule Categories