How to remove unnecessary re-renders?

Question

React

Wrote a simple architecture in React, when the first component renders the second component, the second renders the third one.
functional components. Components don't have props. if you make a local state in the first component and change it, then rendering starts, which is logical, but the second and third components are also re-rendered, the question is why? why reconciling doesn't work, because props don't change for the second and third components, they don't exist at all, but they are rerendered?. if we change to class ones, then this does not help, only pureComponent helps, although we know that shouldComponentUpdate is implemented in it, which compares whether the props have changed, but I remind you that they are not there, it also helps to wrap the second component in connect.
Who fumbles, can you tell me why the re-rendering of the second and third components occurs and what does the connection and pureComponent do
there?
Help me to understand

Answer 1

the second and third components are also re-rendered, the question is why?

because that's the way react works.
Just because "props don't change" doesn't mean that the render of the component will produce the same thing. Maybe you have a timer in there or something.
Therefore, by default, the react causes the rendering of all affected components, and if you know for sure that nothing has changed, you need to report it, shouldComponentUpdate in pureComponent does just that, but nothing prevents you from writing your own method. for functional components on hooks, there is React.memo for the same purpose.