Skip to content
Advertisement

Will React rerender if I use setState but the state value stay the same?

Say I have a React component with state {random: 1} currently. If I call

JavaScript

does it trigger re-rendering? If it does, is there any way I can prevent the re-rendering when calling setState but the state does not change like this?

Advertisement

Answer

Yes, it will re-render:

JavaScript
JavaScript

You can add a shouldComponentUpdate method to tell React not to re-render if the random value is the same:

JavaScript
JavaScript

As Artem notes, another option (which is probably better!) is to use a PureComponent instead. From the docs:

React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.

If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

Advertisement