Does React Re-render Components After Every `setState()` Call?

ReactJS: React Rendering After "setState" Call

Query: React Re-rendering with "setState"

Does React re-render all components and their subcomponents whenever "setState()" is invoked?

Explanation:

Yes, React triggers re-rendering by default after "setState()" is called.

Reason for Default Behavior:

Although React aims to optimize rendering, it prevents subtle bugs caused by state mutations by always re-running the "render" method when the state changes.

ShouldComponentUpdate Method:

Each component has a method called "shouldComponentUpdate(nextProps, nextState)". This method determines whether to re-run "render" based on changes to props and state.

Default Implementation of ShouldComponentUpdate:

By default, "shouldComponentUpdate" returns true, ensuring re-rendering occurs every time the state or props change.

Example:

In the provided code snippet, the Main component sets its state to the same value ('me') whenever the text is clicked. Even though the state doesn't change, React still re-renders both the Main and TimeInChild components because "shouldComponentUpdate" returns true by default.

Custom ShouldComponentUpdate Implementation:

You can optimize rendering by writing a custom implementation of "shouldComponentUpdate" that compares the old and new props and state to determine if an actual re-render is necessary.

The above is the detailed content of Does React Re-render Components After Every `setState()` Call?. For more information, please follow other related articles on the PHP Chinese website!