If the parent component's state changes, will the child components that do not receive props re-render? How can this be prevented?

If the parent component's state changes, React will by default re-render this component and all its child components, even if no props are passed to the children.

This happens because when the state updates, the parent component calls its render method, and React recursively updates the component tree.

How to prevent unnecessary re-renders of child components:

1. React.memo — wraps a functional component and prevents it from re-rendering if props haven't changed.

const Child = React.memo(function Child(props) {
  // ...
});

2. shouldComponentUpdate — in class components, you can override this method to control when the component should update.

3. PureComponent — a class that automatically implements a shallow comparison of props and state.

4. Using useMemo and useCallback — to memoize values and functions passed to child components, avoiding new object creation on each render.

Thus, if a child component does not depend on the parent's state and does not receive changing props, it can be wrapped in React.memo to avoid unnecessary re-renders.