react useEffect comparing objects

Question

I am using react useEffect hooks and checking if an object has changed and only then run the hook again.

My code looks like this.

const useExample = (apiOptions) => {
    const [data, updateData] = useState([]);
    useEffect(() => {
       const [data, updateData] = useState<any>([]);
        doSomethingCool(apiOptions).then(res => {               
           updateData(response.data);
       })
    }, [apiOptions]);

    return {
        data
    };
};

Unfortunately it keeps running as the objects are not being recognised as being the same.

I believe the following is an example of why.

const objA = {
   method: 'GET'
}

const objB = {
   method: 'GET'
}

console.log(objA === objB)

Perhaps running JSON.stringify(apiOptions) works?

Was there a solution for this? You didn't choose an answer so I'm wondering if you just went another route? — FabricioG
– FabricioG, Commented Aug 29, 2020 at 0:10
@FabricioG can't remember tbh, but looks like lots of good answers below. — peter flanagan
– peter flanagan, Commented Feb 6, 2021 at 14:23

lenilsondc · Accepted Answer · 2021-08-18 02:07:52Z

115

Use `apiOptions` as state value

I'm not sure how you are consuming the custom hook but making apiOptions a state value by using useState should work just fine. This way you can serve it to your custom hook as a state value like so:

const [apiOptions, setApiOptions] = useState({ a: 1 })
const { data } = useExample(apiOptions)

This way it's going to change only when you use setApiOptions.

Example #1

import { useState, useEffect } from 'react';

const useExample = (apiOptions) => {
  const [data, updateData] = useState([]);
  
  useEffect(() => {
    console.log('effect triggered')
  }, [apiOptions]);

  return {
    data
  };
}
export default function App() {
  const [apiOptions, setApiOptions] = useState({ a: 1 })
  const { data } = useExample(apiOptions);
  const [somethingElse, setSomethingElse] = useState('default state')

  return <div>
    <button onClick={() => { setApiOptions({ a: 1 }) }}>change apiOptions</button>
    <button onClick={() => { setSomethingElse('state') }}>
      change something else to force rerender
    </button>
  </div>;
}

Alternatively

You could write a deep comparable useEffect as described here:

function deepCompareEquals(a, b){
  // TODO: implement deep comparison here
  // something like lodash
  // return _.isEqual(a, b);
}

function useDeepCompareMemoize(value) {
  const ref = useRef() 
  // it can be done by using useMemo as well
  // but useRef is rather cleaner and easier

  if (!deepCompareEquals(value, ref.current)) {
    ref.current = value
  }

  return ref.current
}

function useDeepCompareEffect(callback, dependencies) {
  useEffect(
    callback,
    dependencies.map(useDeepCompareMemoize)
  )
}

You can use it like you'd use useEffect.

edited Aug 18, 2021 at 2:07

answered Jan 8, 2019 at 16:56

lenilsondc

9,8453 gold badges27 silver badges40 bronze badges

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

8 Comments

peter flanagan Over a year ago

Thanks for your help, but I don't want to take this approach as there could be many API options. I have solved this by using JSON.stringify but looks like there is a better way to do it described here but I don't have access to egghead :-( stackoverflow.com/questions/53601931/…

lenilsondc Over a year ago

@peterflanagan the egghead video (I don't have access as well) describe an implementation of a useEffect hook with deep comparison. I've updated my answer with a hint, I hope it helps, but you have to implement the comparison algorithm that is most suitable for you using lodash or something else should do the job but if you can't use 3rd party libs you can implement you own.

skyboyer Over a year ago

@peterflanagan might it be better just to switch onto class-based component with didComponentUpdate instead? JSON.stringify may nullify any performance boost while complex comparison may nullify better readability of functional components.

Krzysztof Cieslinski Over a year ago

@lenilsondc for the alternative case its important to pass the array to useEffect dependencies - if you pass an object then it won't work as expected.

Alex Over a year ago

@lenilsondc In the alternative method, there is no array passed to useEffect. Can you explain how this works? When I tried using that approach, ESLint complained that I was passing a function as second argument to useEffect instead of an array.

|

adl · Accepted Answer · 2020-06-16 13:42:24Z

30

If the input is shallow enough that you think deep equality would still be fast, consider using JSON.stringify:

const useExample = (apiOptions) => {
    const [data, updateData] = useState([]);
    const apiOptionsJsonString = JSON.stringify(apiOptions);

    useEffect(() => {
       const apiOptionsObject = JSON.parse(apiOptionsJsonString);
       doSomethingCool(apiOptionsObject).then(response => {               
           updateData(response.data);
       })
    }, [apiOptionsJsonString]);

    return {
        data
    };
};

Note it won’t compare functions.

answered Jun 16, 2020 at 13:42

adl

2,0451 gold badge28 silver badges33 bronze badges

3 Comments

marcvangend Over a year ago

This seems like a nice and simple solution when apiOptions is a not-too-complex data object. But I wonder: is it necessary to do JSON.parse(apiOptionsJsonString) inside useEffect()? Can't you simply use apiOptions from the parent scope?

adl Over a year ago

@marcvangend if you use the apiOptions from the parent scope you would have to add it as a dependency to the useEffect which will bring back the problem..

Jeff Padgett Jun 24 at 0:12

Why would you have to do that? You will still be getting the most recent apiOptions.

tanguy_k · Accepted Answer · 2021-03-31 17:10:34Z

28

I just found a solution which works for me.

You have to use usePrevious() and _.isEqual() from Lodash. Inside the useEffect(), you put a condition if the previous apiOptions equals to the current apiOptions. If true, do nothing. If false updateData().

Example :

const useExample = (apiOptions) => {

     const myPreviousState = usePrevious(apiOptions);
     const [data, updateData] = useState([]);
     useEffect(() => {
        if (myPreviousState && !_.isEqual(myPreviousState, apiOptions)) {
          updateData(apiOptions);
        }
     }, [apiOptions])
}

usePrevious(value) is a custom hook which create a ref with useRef().

You can found it from the Official React Hook documentation.

const usePrevious = value => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

edited Mar 31, 2021 at 17:10

tanguy_k

12.5k6 gold badges64 silver badges65 bronze badges

answered Feb 15, 2019 at 13:47

Steffi

7,12326 gold badges81 silver badges132 bronze badges

1 Comment

Up209d Over a year ago

Does it get warning about missing dependency myPreviousState?

kasongoyo · Accepted Answer · 2019-12-13 12:32:38Z

20

If you're real sure that you cannot control apiOptions then just replace native useEffect with https://github.com/kentcdodds/use-deep-compare-effect.

answered Dec 13, 2019 at 12:32

kasongoyo

1,8861 gold badge17 silver badges20 bronze badges

2 Comments

crazyGuy Over a year ago

This is the correct answer. The useDeepCompareEffect is also developed by the main engineer behind the React Testing Library. Further, the code in useDeepCompareEffect very small and simple to understand. I highly suggest to read it.

AncientSwordRage Over a year ago

Welcome to the SO! we really appreciate your help and answering the questions. Maybe it is better to explain more about what is in the link and just use it as a reference.

marc_s · Accepted Answer · 2023-03-12 08:55:13Z

3

It's really so simple in some cases!

const objA = {
   method: 'GET'
}

const objB = {
   method: 'GET'
}

console.log(objA === objB) // false

Why objA not equal with objB? Coz JS just compare their address right? They are two different obj. That's we all know!

The same as React hooks does!

So, also as we all know, objA.method === objB.method right? Because they are literal.

The answer comes out:

React.useEffect(() => {
    // do your fancy work
}, [obj.method])

edited Mar 12, 2023 at 8:55

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Feb 21, 2022 at 13:45

A.Chan

8658 silver badges9 bronze badges

3 Comments

Arashdeep Singh Over a year ago

how do I do this if I don't know the keys available in the object? My object may have variable kays.

KeitelDOG Over a year ago

This is very useful if you want to see if .id of object has changed to reload, without reloading if other attributes has changed.

A.Chan Over a year ago

just JSON.stringify @Arashdeep

Volatore74 · Accepted Answer · 2020-09-19 04:40:02Z

0

You can use useDeepCompareEffect, useCustomCompareEffect or write your own hook.

https://github.com/kentcdodds/use-deep-compare-effect https://github.com/sanjagh/use-custom-compare-effect

answered Sep 19, 2020 at 4:40

Volatore74

352 bronze badges

1 Comment

El.Hum Over a year ago

Welcome to the SO! we really appreciate your help and answering the questions. Maybe it is better to explain more about what is in the link and just use it as a reference.

accidental_PhD · Accepted Answer · 2022-04-27 15:02:56Z

0

One other option, if you have the ability to modify doSomethingCool:

If know exactly which non-Object properties you need, you can limit the list of dependencies to properties that useEffect will correctly interpret with ===, e.g.:

const useExample = (apiOptions) => {
    const [data, updateData] = useState([]);
    useEffect(() => {
       const [data, updateData] = useState<any>([]);
        doSomethingCool(apiOptions.method).then(res => {               
           updateData(response.data);
       })
    }, [apiOptions.method]);

    return {
        data
    };
};

answered Apr 27, 2022 at 15:02

accidental_PhD

7878 silver badges18 bronze badges

Collectives™ on Stack Overflow

react useEffect comparing objects

7 Answers 7

Use `apiOptions` as state value

Alternatively

8 Comments

3 Comments

1 Comment

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Use apiOptions as state value

Alternatively

8 Comments

3 Comments

1 Comment

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Use `apiOptions` as state value