shouldComponentUpdate(): Returned undefined instead of a boolean value.

Question

Before anyone marks this as a duplicate, I went through this question ReactJS Warning: Thumbnails.shouldComponentUpdate(): Returned undefined instead of a boolean value. Make sure to return true or false and it doesn't answer my question (or I wasn't able to get it (to say the least)

so this my code

  shouldComponentUpdate(nextProps, nextState) {
    console.log(this.props.order, nextProps.order)
    if (nextProps.order !== this.props.order) {
      return true;
    }
  }

Here when I check the console log in chrome, it throws a warning saying

shouldComponentUpdate(): Returned undefined instead of a boolean value. Make sure to return true or false

But everything works as expected (or the way I want to), Also when I do something like

shouldComponentUpdate(nextProps, nextState) {
    console.log(this.props.order, nextProps.order)
      return nextProps.order !== this.props.order
  }

It doesn't throw an error.

[Question] Why am i getting that warning? when I clearly return true?

add else return false after if, you only returned true

Metalik
– Metalik

2018-06-14 11:20:21 +00:00
Commented Jun 14, 2018 at 11:20 — Metalik
– Metalik, Commented Jun 14, 2018 at 11:20

Ayorinde · Accepted Answer · 2018-06-14 11:28:24Z

8

You are getting an error in the first case because you are not returning anything if (nextProps.order == this.props.order). so, you could have done this:

  shouldComponentUpdate(nextProps, nextState) {
    console.log(this.props.order, nextProps.order)
    if (nextProps.order !== this.props.order) {
      return true;
    }
    return false; //this is the missing piece
  }

answered Jun 14, 2018 at 11:28

Ayorinde

1223 bronze badges

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

Comments

Valeriia Pshenychna · Accepted Answer · 2018-06-14 11:21:40Z

1

In second variant it will definitely return true or false. But in your first piece of code, you don't specify else and it can be true or undefined, so you get that warning

answered Jun 14, 2018 at 11:21

Valeriia Pshenychna

631 silver badge7 bronze badges

Comments

Flopi · Accepted Answer · 2018-06-14 11:20:44Z

0

When nextProps.order !== this.props.order is false the shouldComponentUpdate function dont enter in the if with return and will return undefined.

shouldComponentUpdate only want to return boolean values.

Try with your second impmenentation to return true or false.

answered Jun 14, 2018 at 11:20

Flopi

1163 bronze badges

Collectives™ on Stack Overflow

shouldComponentUpdate(): Returned undefined instead of a boolean value.

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related