Does React Always Re-render Components on State Change?

ReactJS - React Re-renders All Components on State Change

Does React always re-render components upon setState invocation?

Yes, it does, by default.

React employs a shouldComponentUpdate method within each component, responsible for determining whether it should re-render when its state or props change. However, the default implementation of this method always returns true, leading to re-rendering every time.

Why does React re-render even when the state remains unchanged?

The re-rendering process consists of two stages:

1. Virtual DOM Rendering: Upon render invocation, React creates a new virtual DOM structure. Note that this happens whenever setState() is called, regardless of the state's actual change.
2. Native DOM Rendering: React updates the actual DOM only when necessary, based on the virtual DOM changes. This is where React's optimization capabilities come into play, minimizing DOM mutations.

In the example provided, both the Main and TimeInChild components re-render upon button click, despite the unchanged state, because the default implementation of shouldComponentUpdate returns true. To prevent this, you can override shouldComponentUpdate to perform state or prop comparison and return false when there is no meaningful change.

The above is the detailed content of Does React Always Re-render Components on State Change?. For more information, please follow other related articles on the PHP Chinese website!