Why shouldn't I use shouldComponentUpdate in ReactJS?

Question

Previously we used componentWillReceiveProps() to update a component on props change. Let's say have a component enable or disable an input field depending on some state in App.js

Now this is marked unsafe and

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

Explains several alternatives to use instead.

But I wonder why none of these mention the use of shouldComponentUpdate() for this case. I could use

shouldComponentUpdate(nextProp){
    this.setState({
        active: nextProp.active
    });
    return true;
}

To set the state of the component active which removes the disabled from an input field.

From reading the docs I couldn't understand why they suggest rather complicated memoization helpers or the componentDidUpdate lifecycle (which only provides previousProbs and thus state that's older than the current state).

Is there a reason not to do it like in my example?

Because putting logic unrelated to whether or not the component should update in sCU is misleading. It's called that for a reason. — Dave Newton
– Dave Newton, Commented Oct 23, 2019 at 0:02
I don't understand. The component should update (it's active state) on receiving prop — user6329530
– user6329530, Commented Oct 23, 2019 at 0:05
I think your misunderstanding the wording of the methods name. sCU isn’t “tell me what state properties should be updated”, it’s “tell me if the component should re-render given the current incoming state/props” — Alexander Staroselsky
– Alexander Staroselsky, Commented Oct 23, 2019 at 0:08
@bxyify Not only what Alexander said, but it would also be easy to create an infinite tender loop this way. — Dave Newton
– Dave Newton, Commented Oct 23, 2019 at 0:12
I thought it was a re-render when I change the state of an element? — user6329530
– user6329530, Commented Oct 23, 2019 at 0:14

Matt · Accepted Answer · 2019-10-23 00:10:33Z

3

shouldComponentUpdate is used in the case that a prop change is causing a re-render that you don't want - you may only care about certain props that affect the rendered view. You can manually inspect nextProps for changes to those specific props and decide to render or not.

You should not modify state (or anything else) inside of shouldComponentUpdate.

answered Oct 23, 2019 at 0:10

Matt

3,6804 gold badges40 silver badges50 bronze badges

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

2 Comments

user6329530 Over a year ago

I don't understand this

Dave Newton Over a year ago

@bxyify That's non-actionable. What don't you understand?.

Collectives™ on Stack Overflow

Why shouldn't I use shouldComponentUpdate in ReactJS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related