ReactJS: Does `setState` Always Trigger a Full Re-render?

ReactJS: Does "render" Trigger Every Time "setState" is Called?

React is designed to efficiently re-render components only when necessary. However, this behavior may not always be apparent, leading to questions about the relationship between "setState" and rendering.

Default Rendering Behavior

By default, calling "setState" triggers a full re-render of the component and all its child components. This ensures that any changes to state are accurately reflected in the UI.

This behavior is a result of "shouldComponentUpdate" always returning true by default. This method determines whether a component should update its render output based on changes to props or state.

Purpose of Render

Even though "render" is called every time "setState" is invoked, React does not immediately update the DOM. Instead, a Virtual DOM is generated representing the desired state of the UI. The actual DOM is only modified if there are changes between the old and new Virtual DOMs.

Example

Consider the code snippet provided in the question:

this.setState({'test':'me'});

Despite the state not changing after the initial click, both the parent and child components are re-rendered. This is because "shouldComponentUpdate" always returns true, forcing a re-render.

Optimizing Re-rendering

To prevent unnecessary re-renders, you can override "shouldComponentUpdate" and compare the new props and state to the previous values. If there are no significant changes that would affect the UI, you can return false to prevent rendering.

Remember that overusing "shouldComponentUpdate" can lead to performance issues if the logic is too complex or performs unnecessary comparisons.

The above is the detailed content of ReactJS: Does `setState` Always Trigger a Full Re-render?. For more information, please follow other related articles on the PHP Chinese website!