Optimize React renders with memo

Short summary

React components re-render when state updates, parents re-render, context values change, or hook state updates. React.memo prevents unnecessary child re-renders if props remain unchanged, but breaks when object/function props are recreated each render due to referential inequality. Use useMemo for objects, useCallback for functions, or custom comparison—but optimize judiciously, as solid component composition is more maintainable than complex memoization layers.

• •Four main re-render triggers: state changes, parent re-renders, context updates, and hook state changes
• •React.memo prevents re-renders if props don't change, but fails when objects/functions are recreated due to referential inequality
• •Use useMemo to cache objects, useCallback for functions; prioritize composition over memoization for maintainability

Generated with AI, which can make mistakes.