Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Performance
  3. Re Render Optimization

Re-render Optimization

Patterns to minimize unnecessary re-renders.

Quick Reference

Key patterns:

  • Defer state reads (don't subscribe in callbacks)
  • Use React.memo and useMemo for expensive work
  • Primitive dependencies in effects
  • Derived booleans instead of raw values
  • Functional setState for stable callbacks

Impact: MEDIUM - Reduces wasted computation.

Defer State Reads

Don't subscribe to state only used in callbacks:

React.memo for Expensive Components

useMemo for Expensive Calculations

Primitive Dependencies

Use primitive dependencies instead of objects:

Derived Booleans

Functional setState

Use functional form for stable callbacks:

Lazy State Initialization

Pass function to useState for expensive initial values:

startTransition for Non-Urgent Updates

Zustand Store Optimization

Subscribe to minimal slices:

Related Documentation

  • State Management - Zustand optimization
  • Writing Hooks - useEffect dependencies

Reference Files

For more detailed technical guidance, see these reference files:

  • rerender-defer-reads.md
  • rerender-memo.md
  • rerender-dependencies.md
  • rerender-derived-state.md
  • rerender-functional-setstate.md
  • rerender-lazy-state-init.md
  • rerender-transitions.md

Previous

Performance / Bundle Optimization

Next

Code quality / TypeScript Patterns

On this page

Quick Reference
Defer State Reads
React.memo for Expensive Components
useMemo for Expensive Calculations
Primitive Dependencies
Derived Booleans
Functional setState
Lazy State Initialization
startTransition for Non-Urgent Updates
Zustand Store Optimization
Related Documentation
Reference Files