Aside from the extra performance required for props, here’s another one

1. A lot of times we write code like this for readability, or maybe for convenience

<Comp style={{color: 'red'}} onClick={() => func(params)}} />
Copy the code

Obviously you wouldn’t want to write useMemo and useCallback all over the place otherwise it would be ugly, in which case changing the Comp to a pure component wouldn’t help because references to props would always change.

2. If a state change causes an unexpected component to perform render, and the component is bulky, the first thing to think about is whether the component should be moved to the parent level. Or define state to child components. Because that’s the fundamental problem. Usually a very heavy thing should not be on a par with trivial parts. Should have such management consciousness.

3. Render isn’t that bad, the diff algorithm will also come in at the end to optimize the actual DOM update process.

4. Someone did a performance test and changed all components to pure by default, which showed negative optimization in nearly half of the test scenarios. (Of course, I don’t understand, is the comparison of props really such a performance cost? It needs to be studied. It’s really weird. If I had 10 props, that would only be equivalent to calling the object.is () method 10 times. Why would that be more expensive than executing render? And generally after render is the need to do a DOM node to do diff, to the back of the comparison of performance consumption is not greater?

5. Rethinking the behavior of the parent component updating to trigger the child component’s render can actually avoid some bugs. Let’s say you pass a deeply nested object to be used by a child component, but change the object’s properties with a mutated value, and then trigger a parent component update in some other way. The problem is that children that are pure components will not be updated. You might say this is a code level problem, you mutate the value! But the more important factor is that such code scenarios are theoretically widespread and can only be avoided by actually executing the child render and then diff. If you’re a framework developer, what are your trade-offs? Presumably the answer will be the same, or “bear the pain” render it! After all, it’s not all bad. You don’t have to render comparisons, well, people might start lambasting the React update for not being smart enough.