Optimizing React components with children property?

Question

JavaScript

Good afternoon!
When creating layout components, I encountered the following problem - if the layout component accepts child components as children, and its shouldComponentUpdate method is called - each time the current and new props.children are not equal to each other (even when these children are actually the same).
Code Example
When we click on the "Change Color" button, we change the state of the main App component, which causes a redraw of its child Layout component, whose children have not changed.
What is the reason children are always not equal to each other, and how can you avoid these redraws of the simplest static component, other than implementing your own shouldComponentUpdate (not convenient with a large number of incoming properties)?

Answer 1

class Layout extends React.PureComponent?