Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  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