React: How does React.memo work under the hood?

React.memo is a higher-order function that memoizes a component. "Under the hood" it creates a special Fiber node type with a memoizedProps flag.

Simple analogy: Imagine a guard at the building entrance.

• Regular component — guard lets everyone in every time, even if they are the same people.
• React.memo — guard remembers faces: "This person already came in 2 seconds ago. Let them through without checking."

How it works inside React:

1. When a component wrapped in React.memo needs to update, React compares old and new props.
2. Comparison goes through Object.is (shallow comparison):
   • For numbers/strings: 5 === 5 → true.
   • For objects/functions: same reference? → true, otherwise → false.
3. If all props are equal — React skips render entirely (bail-out).
4. If at least one prop changed — component renders as usual.

When React.memo works in vain: If you pass an object or function that is recreated on every render, React.memo is useless:

1// BAD: every render creates new style object
2<Button style={{ color: 'red' }} />
3
4// GOOD: object is stable
5const style = { color: 'red' };
6<Button style={style} />

In such cases you need useMemo (for objects) and useCallback (for functions).

React Compiler (React 19+): automatically makes React.memo redundant — the compiler itself determines which components need to be memoized.