How to check if prevProps and nextProps are the same in React?

Question

I have such lifecycle hook

componentDidUpdate(prevProps) {
    // Typical usage (don't forget to compare props):       

    if (prevProps.activeItems !== this.props.activeItems) {
      this.props.doAction();
    }
  }

and props have such a structure

[
  {id:1, hidden: true},
  {id:2, hidden: false}
  {id:3, hidden: true}
]

I need to check if property hidden is the same in prev and next props for in every object, so I will know if I need to run function in if condition or no. How can I do that?

You really can't, that is the bad part of an immutable data structure. You'll have to do the checking manually, I use `array.every`, for this — Akxe, Oct 16 '18 at 11:35

score 7 · Accepted Answer · answered Oct 16 '18 at 12:00

Don't use componentWillReceiveProps -- this hook will be soon deprecated. componentDidUpdate is the correct hook for what you need.

The problem is that the comparison you're doing is a shallow comparison -- i.e. it doesn't compare the nested values in the respective arrays.

The basic idea is that you should loop over both arrays and compared individual nested values -- here's more information about that: How to compare arrays in JavaScript?

You could also use something like's lodash's isEqual method to perform a deep comparison between two arrays: https://lodash.com/docs/4.17.10#isEqual

I do not use omponentWillReceiveProps, I know about it. I tried isEqual and it is work for me. Thanks — rick1, Oct 16 '18 at 13:15

raj m · Answer 2 · 2018-10-16T11:39:11.463

0

Make use of componentWillReceiveProps.

  componentWillReceiveProps (nextProps) { 
      if(nextProps.something !== this.props.soemthing) {
           //write your statements
      }
  }

If you have array of object then You need to map through each object inside array by comparing old props.

edited Oct 16 '18 at 11:39

answered Oct 16 '18 at 11:31

raj m

1,863
6
21
37

https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops and recheck my structure, I have Array of objects and I need to check proprerty of every object – rick1 Oct 16 '18 at 11:36
So you dont know, which property being changed ? – raj m Oct 16 '18 at 11:37
Hidden will be changed – rick1 Oct 16 '18 at 11:37
You need to map through each object inside array by comparing old props. – raj m Oct 16 '18 at 11:38
I know this, I'm asked for some solution – rick1 Oct 16 '18 at 13:09

Estus Flask · Answer 3 · 2018-10-16T12:12:42.820

0

Parent component could take care of this to provide immutable activeItems only in case activeItems elements change.

Otherwise activeItems arrays needs to be tested if they are shallowly equal, e.g. with recompose:

import { shallowEqual } from 'recompose'; 

...

  componentDidUpdate(prevProps) {
    if (shallowEqual(prevProps.activeItems, this.props.activeItems)) {
      this.props.doAction();
    }
  }

edited Oct 16 '18 at 12:12

answered Oct 16 '18 at 12:01

Estus Flask

206,104
70
425
565

score -1 · Answer 4 · answered Oct 16 '18 at 12:14

-1

you can use componentWillReceiveProps for now. because it is getting deprecated soon

   componentWillReceiveProps (nextProps) {
       if(nextProps.something === this.props.soemthing) {
           // do your work
       }
   }

answered Oct 16 '18 at 12:14

Mr. Dev

71
7

what typo in this answer? and look closely it is not same. thanks – Mr. Dev Oct 16 '18 at 13:04
no your answer completely wrong, I said that I have ARAAY OF OBJECTS and I need to check proprety of both props – rick1 Oct 16 '18 at 13:10
Listen rick, you have Array of Objects. okay and you pass this array as a prop in this component. right. now first you have to compare old props and new props are different because whenever any prop changes it comes in "componentWillRecieveProps". let suppose you pass that array in temp named key. so if(nextProps.temp === this.props.temp) { let filteredArray = nextProps.temp.filter((tempObject) => { return "check your condition here"; }) } – Mr. Dev Oct 17 '18 at 08:38

How to check if prevProps and nextProps are the same in React?

4 Answers4