0

I was searching for some react projects examples and i have found some here https://reactjs.org/community/examples.html

One of them is a shopping cart project, i checked the code and i have found something that i could not understand, comparing two arrays in componentWillReceiveProps method.

I know that comparing two arrays always will return false and this was the source of confusion, here

https://github.com/jeffersonRibeiro/react-shopping-cart/blob/master/src/components/Shelf/index.js

My problem is in this part

 if (nextFilters !== this.props.filters) {
      this.handleFetchProducts(nextFilters, undefined);
    }

Since filters is an array as shown in propTypes.

Everything works well, and this what made me ask the question.

So what is the deal here, is componentWillReceiveProps is a special method so it can make at least a shallow compare between two arrays or what exactly is happening here???

Code Eagle
  • 1,293
  • 1
  • 17
  • 34
  • Yes you can compare using === operator ,according to React docs, componentWillReceiveProps() is unsafe, use componentDidUpdate() or getDerivedStateFromProps() – Engineer Apr 09 '19 at 11:32
  • check here https://reactjs.org/docs/react-component.html#updating `componentWillReceiveProps ` is unsafe and should be avoided to use – Amir-Mousavi Apr 09 '19 at 11:32
  • i tried this [1, 2, 3] === [1, 2, 3] and this returned false – Code Eagle Apr 09 '19 at 11:35

1 Answers1

0

This might duplicate answers so you might find this useful: check if two arrays contain identical objects - react componentDidUpdate For your information using getSnapshotBeforeUpdate(prevProps, prevState) is now preferred over componentWillReceiveProps see the react docs , https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate

dorriz
  • 1,927
  • 3
  • 12
  • 19
  • please, i am not asking about how to check two arrays equality, read my question well, i am asking about someone's code that i could not understand – Code Eagle Apr 09 '19 at 11:40
  • Well have you run the code and actually seen if the if statement works as expected , my first thought would be it doesn't and handleFetchProducts just gets called again anyway , if nextFilters === this.props.filters it wouldn't matter would it ? That is the function runs needlesssly and you get the same result as before . – dorriz Apr 09 '19 at 11:45
  • yes this what confuses me, everything works, so why i am asking – Code Eagle Apr 09 '19 at 11:46
  • You mean you're confused because someone has written some bad code ? I think you'll see alot of that. If the conditional if doesn't work , that is its always false as you expect the function just gets called using the same data, if the data in the new array is really diffent it gets called with the 'new' data – dorriz Apr 09 '19 at 11:47
  • this is the live version https://react-shopping-cart-67954.firebaseapp.com/ – Code Eagle Apr 09 '19 at 11:49
  • What confuses me more, is that this project is one of examples that exist on reactjs.org and i am sure it was revised well!! – Code Eagle Apr 09 '19 at 11:50
  • Sorry I do not see what your issue is , the conditional is false every time , the data may or may not be different but it just runs the function anyway, and it gets the result. – dorriz Apr 09 '19 at 11:51
  • Have you run the code on your machine and checked the conditional works ? Honestly its not so unusual to see code that has been missed and doesn't work as expected. – dorriz Apr 09 '19 at 11:51
  • yes it seems he used this hook to make the component update once change and it really achieved the purpose, but i am not sure if this a bad bahaviour – Code Eagle Apr 09 '19 at 12:14
  • Well it runs needlessly on every update of props I'd call that bad or poor coding, it indicates the person coding it doesn't understand the comparison of arrays which is worrying. A better place for this code , if you require it to run once on mount is componentDidMount . Maybe I am more critical though, if I came across this, I would raise an issue to alert the authors or offer to do a fix. – dorriz Apr 09 '19 at 12:39