When does a component rerender in react?

Question

React

Hello! There are incomprehensible moments on understanding the redrawing of components.
In theory, re-rendering of components in react is called when:
1. Changing the component's internal state (this.setState);
2. Changing the properties (props) of the component received from the parent or redrawing the parent.
It's not clear here. If the internal state on the topmost App component changes, will absolutely all the components down the tree be redrawn? And if only 1 out of 10 received a change in the transmitted props, and for the rest, the incoming props data did not change, will they all be redrawn anyway?
3. When changing the context. A comment is also needed on this point. It is not clear how the passed object with data can change with the help of context during the operation of the application? Can the list of properties change on the fly?

Answer 1

1. Component redraw occurs as a result of parent redraw or calls to this.setState() or this.forceUpdate().
It can be controlled in class components with the shouldComponentUpdate lifecycle method. When this.forceUpdate() is called, shouldComponentUpdate is not called.
2.

Changing the properties (props) of the component received from the parent or redrawing the parent.

It is impossible to get new properties without redrawing the parent.
To prevent child components from being re-rendered down the chain, you must implement the shouldComponentUpdate method or use PureComponent where appropriate. Redrawing of functional components cannot be controlled (unless with the help of HOC). Using HOC connect removes all unnecessary redrawing of the child component.
3. Providers are normal components. The parent is redrawn - they are redrawn.
Everything that I wrote above, except for the connect case, is in the official documentation. Worth opening to read.