<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/4-approaches-to-avoid-unnecessary-re-renders-8dcay1egk" -->

---
title: 4 approaches to avoid unnecessary re-renders | daily.dev
description: 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.
canonical: https://daily.dev/posts/4-approaches-to-avoid-unnecessary-re-renders-8dcay1egk
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: 4 approaches to avoid unnecessary re-renders | daily.dev
og:description: 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.
og:url: https://daily.dev/posts/4-approaches-to-avoid-unnecessary-re-renders-8dcay1egk
og:image: https://api.daily.dev/og/posts/8Dcay1Egk.png
og:image:alt: 4 approaches to avoid unnecessary re-renders
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 4 approaches to avoid unnecessary re-renders

**[Community Picks](https://daily.dev/sources/community)** · 4 min read · 56 upvotes · 3 comments

## Summary

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.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://profy.dev/article/react-useeffect-with-object-dependency>

## Community discussion

Top comments from developers on daily.dev.

**@codectl** · 0 upvotes

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

**@realgamereaper** · 0 upvotes

> 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?

**@ishigami** · 0 upvotes

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

## Similar posts on daily.dev

- [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments
- [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments
- [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments
- [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments
- [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments

---

Tags: [#react](https://daily.dev/tags/react), [#react-hooks](https://daily.dev/tags/react-hooks)

[View this post on daily.dev](https://daily.dev/posts/4-approaches-to-avoid-unnecessary-re-renders-8dcay1egk)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"4 approaches to avoid unnecessary re-renders","url":"https://daily.dev/posts/4-approaches-to-avoid-unnecessary-re-renders-8dcay1egk","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/4-approaches-to-avoid-unnecessary-re-renders-8dcay1egk"},"datePublished":"2024-03-23T05:25:03.499Z","dateModified":"2024-05-09T09:28:18.744Z","description":"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.","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/71f5436b39b7fd1f876894dfc4b4c8b3?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/71f5436b39b7fd1f876894dfc4b4c8b3?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"Community Picks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Community Picks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community","url":"https://daily.dev/sources/community"},"commentCount":3,"discussionUrl":"https://daily.dev/posts/4-approaches-to-avoid-unnecessary-re-renders-8dcay1egk","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":56},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":3}],"keywords":"react,react-hooks","timeRequired":"PT4M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"4 approaches to avoid unnecessary re-renders"}]}
{"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/4-approaches-to-avoid-unnecessary-re-renders-8dcay1egk","comment":[{"@type":"Comment","text":"I get this is a bit of a contrived example but given the filters object is static, you could define it outside of the react lifecycle and the reference would never change. Alternatively, and more realistically, defining the filters object with a useState solves the problem, as the reference will remain the same between re-renders.","datePublished":"2024-04-04T12:37:42.274Z","dateModified":"2024-04-06T23:14:32.288Z","url":"https://daily.dev/posts/8Dcay1Egk#c-1Q4ag0nDV","author":{"@type":"Person","name":"dillon","url":"https://daily.dev/codectl","image":"https://avatars.githubusercontent.com/u/26043866?v=4"}},{"@type":"Comment","text":"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?","datePublished":"2024-04-18T06:03:53.182Z","url":"https://daily.dev/posts/8Dcay1Egk#c-BCOycjOEQ","author":{"@type":"Person","name":"Prateek Kumar","url":"https://daily.dev/realgamereaper","image":"https://media.daily.dev/image/upload/s--tHBsAFm0--/f_auto/v1756655184/avatars/avatar_PDtMTYl1otigLgcswbUI4?_a=BAMClqZW0"}},{"@type":"Comment","text":"Nice article.\nI confess that I’ve some difficulties on using useEffect hook. And this article give good directions and explanations about it.\nThanks.","datePublished":"2024-03-23T11:08:25.881Z","url":"https://daily.dev/posts/8Dcay1Egk#c-jJEI9LYwj","author":{"@type":"Person","name":"Kan Ishigami","url":"https://daily.dev/ishigami","image":"https://avatars.githubusercontent.com/u/2190465?v=4"}}]}
```