React shouldComponentUpdate detect change

Question

I must be doing something dumb here, but after a day of trying to figure it out, I am turning here...

I have a dropdown menu for each element of an array val which I save in the Component state:

class C extends Component {

    state = { val : [ 1,2,3,4] }
    ...

}

where a change in each of the dropdown entries triggers this callback:

  onChanged = (event, index) => {
    console.log("val changed");
    this.setState(state => {
      const val = state.val;
      val[index] = event.target.value;
      return { val: val };
    });
  };

Now the issue is that I can't figure out how to detect this change in shouldComponentUpdate. Specifically, when I change one of the dropdown options, I see val changed being logged. However, in the shouldComponentUpdate method, the nextState and this.state always contain the same values (and appear to be identical on comparison). So there is no way for me to detect a change in shouldComponentUpdate. Here is the exact code I am using:

shouldComponentUpdate(nextProps, nextState) {

    console.log(
      "shouldComponentUpdate",
      nextProps.val,
      this.state.val,
      nextState.val,
      this.state.val === nextState.val
    );
    return false;
}

Before a change in one of the dropdown options, this logs something like

shouldComponentUpdate, undefined, [1, 2, 3, 4], [1, 2, 3, 4], true

If I change the first dropdown from 1 to 9, then I see

shouldComponentUpdate, undefined, [9, 2, 3, 4], [9, 2, 3, 4], true

I expected that immediately after the change I would see

shouldComponentUpdate, undefined, [1, 2, 3, 4], [9, 2, 3, 4], true

Please tell me how I can detect a change in shouldComponentUpdate or what idiom I should be using.

EDIT:

It was suggested that I slice the value array in the onChanged callback, that is, change to callback to:

  onChanged = (event, index) => {
    console.log("val changed");
    this.setState(state => {
      const val = state.val.slice();
      val[index] = event.target.value;
      return { val: val };
    });
  };

That did not fix the issue. Here is the console log before and after a change:

shouldComponentUpdate undefined (4) [1, 2, 3, 4] (4) [1, 2, 3, 4] true
val changed
shouldComponentUpdate undefined (4) [9, 2, 3, 4] (4) [9, 2, 3, 4] true

EDIT:

Crikeys I am dumb. There was a dumb return statement that was getting hit. I totally missed it. I am accepting the answer below since they are correct as the problem was stated.

Gabriele Petrioli · Accepted Answer · 2018-12-28 11:05:23Z

2

That is because you are mutating the array and re use it.

Change const val = state.val; to either

const val = [...state.val];

or

const val = state.val.slice();

to create a new array

answered Dec 28, 2018 at 11:05

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

1 Comment

bremen_matt Over a year ago

I am pretty sure I tried slicing already and that wasn't working. Let me check again

Ashish · Accepted Answer · 2018-12-28 11:19:17Z

0

JS arrays are passed by reference and not pass by value.
when you are doing const val = state.val; and val[index] = event.target.value; it is changing the state variable before setState.

example:

var a = {x: [1,2,3]}
var b = a.x
b[0] = 5 // b = [5, 2, 3] and a = {x: [5,2,3]}

You can use slice or destructuring to solve your problem.

//Slice
const val = state.val.slice()
//Destructure
const val = [...state.val]

In the above example:

var a = {x: [1,2,3]}
var b = [...a.x]
var c = a.x.slice()
b[0] = 5     //b = [5, 2, 3] and a = {x: [1,2,3]}
c[0] = 6    //b = [6, 2, 3] and a = {x: [1,2,3]}

edited Dec 28, 2018 at 11:19

answered Dec 28, 2018 at 11:12

Ashish

4,3801 gold badge19 silver badges46 bronze badges

Collectives™ on Stack Overflow

React shouldComponentUpdate detect change

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related