React’s useEffect hook can lead to tricky situations. If you’re not careful it can cause unnecessary executions of the effect or even infinite re-renders. Especially when using objects as dependencies. Here are 4 approaches that avoid unnecessary executions.

Martín M.

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Learn different approaches to using an object as a dependency in the useEffect hook in React to avoid unnecessary re-renders and understand their pros and cons.

4 approaches to avoid unnecessary re-renders

Approach 3: Third-party useDeepCompareEffect hook

I get this is a bit of a contrived example but given the <code>filters</code> object is static, you could define it outside of the react lifecycle and the reference would never change. Alternatively, and more realistically, defining the <code>filters</code> object with a <code>useState</code> solves the problem, as the reference will remain the same between re-renders.

But, isn’t the React 19 compiler solves this already. There is even no need to add useMemo and useCallback. So, should we even learn the ways of React 18?

Nice article.
I confess that I’ve some difficulties on using useEffect hook. And this article give good directions and explanations about it.
Thanks.