react performance_error ai_generated true

Component re-renders despite React.memo wrapper. Custom comparison function returns incorrect results.

ID: react/react-memo-comparison-error

Also available as: JSON · Markdown
85%Fix Rate
87%Confidence
95Evidence
2022-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

React.memo component re-renders unexpectedly because props change referential identity every render (new object/array/function created inline) or the custom comparison function has a bug.

generic

Workarounds

  1. 92% success Stabilize prop references with useCallback for functions and useMemo for objects/arrays 
    const handler = useCallback(() => doThing(id), [id]); const config = useMemo(() => ({ key: value }), [value]); <MemoChild onAction={handler} config={config} />

    Sources: https://react.dev/reference/react/useCallback https://react.dev/reference/react/useMemo

  2. 88% success Pass primitive props instead of objects when possible 
    Instead of <MemoChild user={user} />, pass <MemoChild userName={user.name} userId={user.id} /> so shallow comparison works

    Sources: https://react.dev/reference/react/memo#minimizing-props-changes

Dead Ends

Common approaches that don't work:

  1. Use JSON.stringify comparison in the React.memo areEqual function 70% fail

    JSON.stringify is slow for large objects, does not handle circular references, ignores functions and undefined values, and runs on every render defeating the purpose of memoization

  2. Wrap every component in React.memo to prevent all re-renders 55% fail

    Adds overhead of prop comparison to every component. For components that almost always receive new props, memo makes performance worse.

Error Chain

Leads to:
Preceded by:
Frequently confused with: