When to use React.memo?

Question

React

I read the documentation, React.memo is a PureComponent for functional components, but why is it almost never used?

Logically, every component (without its own state), even those that do not use props, should be wrapped in a memo, but they don’t do that, why?

I can’t find a definitive answer yet, I’ll be grateful for a hint:
when changing the state of a component, does React re-render starting from the component whose state has changed, or the entire tree from the root?

Answer 1

But why isn't it being used?

And on what basis is this conclusion? It seemed to me the opposite, any optimization is used everywhere, even where it only makes things worse.

(no own state)

The internal state of the component does not affect the result of its memo, memo only compares props.

Logically, every component (without its own state), even those that do not use props, should be wrapped in a memo, but they don’t do that, why?

There are conditions here. For example, I have the following rules:
Wrap in memo necessarily if - the parent component is often re-rendered without changing the props of your component. If your component is not wrapped in a memo, then it will be rerendered as much as the parent. But here I would wrap your component in the parent in useMemo (if you write on hooks).
We do not wrap in memo, because wrapping it will do nothing or make it worse if - the parent component only re-renders when the props that are passed to your component change. In other words, if your component only re-renders because of its parent when its prop values ​​change, then memo will be checked for nothing (and memo is also heavy).
Can be wrapped in memo if- the component draws a complex layout with a lot of other components, and has complex code in render or in useEffect (no dependencies, which is executed on each render).
In other cases, don't use memo unless performance studies for your particular application indicate so.
It is also important to keep track of re-renders so that the parent does not pass props that have a different reference on each render, for example: in this case, memo will not work. You can still accidentally skip this if you are not using TypeScript / Flow, then this code will be re-rendered once again if it suddenly turns out that item is an object with an unstable reference.
<MemoComp onClick={() => console.warn('hello')} />
<MemoComp isActive={item || isEnabled} />
In general, the main thing to understand is that a simple memo is faster than a simple render, you just need to avoid double work, when any render will compare memo and render will occur.

Answer 2

memo stores each component in memory, respectively, the more stored components, the more memory is occupied