1

I know that shouldComponentUpdate() will prevent calling render() method if it returns false. If I use some expensive logic in render() method, then shouldComponentUpdate() is a really helpful thing, because I can prevent render() call.

But what if my render() method returns only Element, without executing any expensive code.

Is there any difference between comparison( let's take PureComponent's implementation ) in shouldComponentUpdate() and built-in React diffing while render() call?

Improve this question
2
  • Just mentioning that PureComponent has a loop of conditions (Shallow) that checks whether the props has changed - Consider that this also cost performance, sometimes even more than without it. So, it really depends on your specific case. Commented Nov 12, 2018 at 8:12
  • Depends on what Element is. You need to use benchmarks to estimate whether shouldComponentUpdate is justified. This is always done like that. Commented Nov 12, 2018 at 10:31

3 Answers 3

Reset to default
1

I think it is great written here: https://reactjs.org/docs/reconciliation.html

The main diffrence is that React.PureComponent does a shallow comparison between old props and new props and between old state and new state, but the built-in React diffing(reconcilation) briefly is comparing down the old and new DOM tree, but please read this article above, it will resolve your doubts.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

React tells you to avoid at maximum scenarios, this will cause a performance issues. React is very smart at updating the component elements, use key where you need to, react will match the updates and update the DOM. React itself does the comparison of the previous and new props and update the dom.

Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.

As per react component will re-render only if the state is changed.

This method only exists as a performance optimization. Do not rely on it to “prevent” a rendering, as this can lead to bugs. Consider using the built-in PureComponent instead of writing shouldComponentUpdate() by hand. PureComponent performs a shallow comparison of props and state, and reduces the chance that you’ll skip a necessary update.

Source: https://reactjs.org/docs/react-component.html#shouldcomponentupdate

If you still want to use that you need to measure downside and upside for this. I think you should avoid it completely, because there are higher chances that you might mess up the things by comparing.

Improve this answer

Comments

0

ShouldComponentUpdate() in the PureComponent's will do shallow comparison of current and previous props and state. which skip the whole rendering process, including calling render() on this component and below. Which totally avoids the Reconciliation process. which means that react don't have to update the V-DOM and no need to compare against real DOM. Which is expensive task compared with shallow comparison.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.