React - useEffect JSON object with same content but disordered fields

Question

I am fetching JSON data from my firebase server, and sometimes, it has disordered fields.

I want to run a useEffect when the content of the json object changes... but, trying to do the following

useEffect(() => {}, [JSON.stringify(data)]);

doesn't work correctly because of the disordered fields.

I have made an snack, simulating my current scenario.

How can I solve this?

Note: It seems that it could be better to avoid the state update... any ideas?

Can you provide an example of the data? How/when is the data fetched? Or rather, how does the component get the updated data? Could you compare the data when it is fetched and perform whatever actions you want to perform then and there? — Felix Kling, Sep 16 '21 at 19:00
maybe you are looking for https://stackoverflow.com/a/55808960/5863438 — the_spectator, Sep 16 '21 at 19:19

Sultan H. · Accepted Answer · 2021-09-16T19:23:27.320

From this answer: https://stackoverflow.com/a/3849480/8861638

We can compare two objects deeply with this function, as it uses recursion, it's guaranteed to go all the way in.

function countProps(obj) {
    var count = 0;
    for (k in obj) {
        if (obj.hasOwnProperty(k)) {
            count++;
        }
    }
    return count;
};

function objectEquals(v1, v2) {

    if (typeof(v1) !== typeof(v2)) {
        return false;
    }

    if (typeof(v1) === "function") {
        return v1.toString() === v2.toString();
    }

    if (v1 instanceof Object && v2 instanceof Object) {
        if (countProps(v1) !== countProps(v2)) {
            return false;
        }
        var r = true;
        for (k in v1) {
            r = objectEquals(v1[k], v2[k]);
            if (!r) {
                return false;
            }
        }
        return true;
    } else {
        return v1 === v2;
    }
}

Now, we can take the advantage of the objectEquals function to do a comparison between the new and the existing data prop in that component.

First, we want to keep track of the data when it comes so we can compare it to the future ones, we can use the useRef hook comprehensively so we don't trigger any re-render.

// data is our initial state.
const savedData = useRef(data || {});

Then, we can customize the useEffect to listen to the comparison of the savedData and the new coming data and see whether there is a change or not.

const dataChanged = objectEquals(data, savedData.current);

useEffect(() => {
  if (dataChanged) {
    savedData.current = data;
    // Do something...
  }
}, [dataChanged])

React - useEffect JSON object with same content but disordered fields

1 Answers1