Skip Main Navigation

Object dependencies in React useEffect hook

17 December 2020 · 1 min read

  • Also have objects being created on every render

    • if those are used in useEffect, it’ll cause unnecessary effect calls
    • the object has changed on successive renders (just like the function)
    • several fixes:
    • serialize the object in dependencies list
    • create variables outside of useEffect of the object properties you need & use those in dependencies list
    • use useDeepCompareEffect, useShallowCompareEffect or useCustomCompareEffect custom hooks from react-use
  • There are a list of hooks in react-use to simulate lifecycle methods if you really miss them

Keep learning my friends. 🤓

Hi, I'm Ben Ilegbodu. 👋🏾

I'm a Christian, husband, and father of 3, with 15+ years of professional experience developing user interfaces for the Web. I'm a Principal Frontend Engineer at Stitch Fix, frontend development teacher, Google Developer Expert, and Microsoft MVP. I love helping developers level up their frontend skills.

Discuss on Twitter // Edit on Github

Attend upcoming minishops

Minishops by Ben Ilegbodu are fully-remote workshops that last about 3 hours. They’re highly-focused, covering only the concepts you want to learn so that you can level up your skills and get on with the rest of your day.