React detect if data from fetched json file is changed wit previous data

Question

I'm building a cryptocoin app with React and a JSON API for the latest data. I'm using fetch to load the JSON API and I use setInterval to rerender the app every 10 seconds.

Is there a way to compare the previous data with the new data?

For example, if a value is 3456 and the new value is 3458 I want to compare the old data with the new data and use an arrow up icon or so or give the value a green color. if the new data is 3454 a red color. I can do this with CSS of course. The thing I can't is to compare the difference between the old data and the new data.

my code so far:

GetCryptoData() {
    let dataURL = this.props.coinUrl;
    fetch(dataURL)
        .then(res => res.json())
        .then(res => {
        this.setState({
            item: res
        })
    })

    componentDidMount(nextState) {
        this.GetCryptoData();
        setInterval(this.GetCryptoData.bind(this), 10000);
    };
}

asafel · Answer 1 · 2017-09-02T14:28:40.480

0

The best approach in react will be to add your received information into your Redux state and then in your component do:

...
componentWillReceiveProps(nextProps) {
  if(this.props.data !== nextProps.data) {
    // Do something - data as been changed
  }
}
...

Hope it helps. If you need any more elaboration please tell me. Also, check this

edited Sep 02 '17 at 14:28

answered Sep 02 '17 at 11:56

asafel

713
1
7
14

I'm not using Redux to store the data, is that necessary? – Ron Sep 02 '17 at 12:02
@Ron Well, in order to solve it like I suggested I'll say yes. I will try to think about other method and get back to you. Redux is a realy good way to store and manage your application state. it seems to me that it can really help with an app like you are trying to build. why wont use it than? – asafel Sep 02 '17 at 12:05
To be honest. Did not thought about Redux or Flux or so to store the data, but seems legit. I will try that and will update my solution. – Ron Sep 02 '17 at 12:12
I wouldn't recommend this approach. ComponentWillReceiveProps can really mess up your data flow as its called when ever the props are received to the component and can be a performance issue. Also the equality check above will always be false as you cannot compare 2 objects in Javascript like that as objects are compared via memory references and not values. You can 1. Compare the value in existing state and then do a set state as mentioned in the answer below. Or 2. Pass a callback funtion to setState which accepts prevState as an argument and theb render the up or down arrow. – Nitish Phanse Sep 02 '17 at 12:37
@NitishPhanse I'm sorry but I have to say I can't agree with you. inside componentWillReceiveProps You make a specific check! no performance issue with that. it is only a if statement this is black and white buddy.. in my answer i did not explained what this.props.data is.. you assumed it is an object and that I compare two objects. This is very abstract. data can also be a number for example.. it depends on your application. – asafel Sep 02 '17 at 13:33
Cool, i mistook it to be an object. But then dont you think adding if checks for various other prop changes can be cumbersome and hard to maintain in the long term. – Nitish Phanse Sep 02 '17 at 13:39
1

@NitishPhanse Well, this is again depends on your app bro. I can tell you that I worked a lot this way in the past year in a massive production app and me and my team found it to be the most convenience way! (using react lifecycle functions). I will be more than happy to learn from you about any other approach while working with react+redux. Please share with us. thanks a lot – asafel Sep 02 '17 at 14:25

score 0 · Answer 2 · answered Sep 02 '17 at 12:18

0

You can do the comparison before setState

.then(res => {
  // Compare here
  if (this.state.item !== res) {
    this.setState({ item: res })
  }
}

answered Sep 02 '17 at 12:18

An Nguyen

1,487
10
21

React detect if data from fetched json file is changed wit previous data

2 Answers2