--- title: Why Your React App Re-renders Too Much (And How to Fix It) description: A practical walkthrough of five common causes of excessive React re-renders, discovered through real profiler investigation. Covers state living too high in... canonical: https://daily.dev/posts/why-your-react-app-re-renders-too-much-and-how-to-fix-it--6tepumtep twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Why Your React App Re-renders Too Much (And How to Fix It) | daily.dev og:description: A practical walkthrough of five common causes of excessive React re-renders, discovered through real profiler investigation. Covers state living too high in... og:url: https://daily.dev/posts/why-your-react-app-re-renders-too-much-and-how-to-fix-it--6tepumtep og:image: https://api.daily.dev/og/posts/6TePUmTeP.png og:image:alt: Why Your React App Re-renders Too Much (And How to Fix It) 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. # Why Your React App Re-renders Too Much (And How to Fix It) **[Medium](https://daily.dev/sources/medium_js)** · 6 min read · 4 upvotes · 0 comments ## Summary A practical walkthrough of five common causes of excessive React re-renders, discovered through real profiler investigation. Covers state living too high in the component tree, inline object/array props breaking reference equality, fresh function references defeating memoized children, Context value recreation on every render, and missing React.memo on expensive components. Each cause includes before/after code examples. Key advice: profile first, move state down before reaching for memoization, stabilize props before adding React.memo, and re-profile after each fix. Also notes that the React Compiler can automate memoization for causes 2, 3, and 5, but state placement and context splitting remain manual decisions. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why does wrapping a component in React.memo not stop it from re-rendering? React.memo fails to prevent re-renders when the props it receives are new object, array, or function references on every parent render, since React compares props by reference. Common causes are inline object or array literals passed as props and inline arrow functions used as event handlers. Stabilizing those props with a constant, useMemo, or useCallback before applying React.memo is required for the memoization to actually take effect. _Debugging why memoized React components still re-render is a common rabbit hole daily.dev readers can shortcut with practical writeups like this._ ### Why does changing one piece of state in a React context provider re-render unrelated components? When a context provider creates its value object inline, such as value={{ user, setUser }}, that object is recreated on every render of the provider, so every component consuming that context re-renders even if the specific data it uses did not change. Wrapping the value in useMemo with the correct dependency array, or splitting one large context into separate contexts for auth, theme, and settings, limits re-renders to only the consumers that actually depend on the changed data. _For developers chasing unnecessary re-renders through context providers, daily.dev surfaces practical React performance fixes like this._ ### Where should I put UI state to avoid re-rendering my whole React dashboard on a single toggle? State should live in the smallest component that wraps only the parts of the UI that actually depend on it, not in a top-level parent component. For example, moving filter state out of a top-level Dashboard component into a smaller FilterableSection wrapper means toggling a filter re-renders only the filter bar and data table instead of the entire dashboard, including charts and sidebar. This costs nothing and requires no memoization. _daily.dev helps developers compare React state-placement patterns before reaching for memoization to fix render cascades._ ## Similar posts on daily.dev - [Your useMemo Probably Isn't Doing Anything](https://daily.dev/posts/your-usememo-probably-isn-t-doing-anything-prlcljav3) · The T-Shaped Dev · 15 upvotes · 4 comments - [Why React.memo Doesn’t Fix Most Performance Problems \(And What Senior Engineers Do Instead\)](https://daily.dev/posts/why-react-memo-doesn-t-fix-most-performance-problems-and-what-senior-engineers-do-instead--xcasdkwfu) · Medium · 22 upvotes · 4 comments - [How to Avoid Overusing useCallback and useMemo in React](https://daily.dev/posts/how-to-avoid-overusing-usecallback-and-usememo-in-react-sjjyd2g8d) · freeCodeCamp · 11 upvotes · 0 comments - [backend basics: what i learned\(part 11\)](https://daily.dev/posts/backend-basics-what-i-learned-part-11--9kxcloms5) · Medium · 0 upvotes · 0 comments - [React Basics: Memoization in React](https://daily.dev/posts/react-basics-memoization-in-react-ptipunthh) · Telerik · 2 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#react](https://daily.dev/tags/react), [#performance](https://daily.dev/tags/performance) [View this post on daily.dev](https://daily.dev/posts/why-your-react-app-re-renders-too-much-and-how-to-fix-it--6tepumtep) ```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":"Why Your React App Re-renders Too Much (And How to Fix It)","url":"https://daily.dev/posts/why-your-react-app-re-renders-too-much-and-how-to-fix-it--6tepumtep","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/why-your-react-app-re-renders-too-much-and-how-to-fix-it--6tepumtep"},"datePublished":"2026-07-25T10:08:41.413Z","dateModified":"2026-09-13T20:30:22.326Z","description":"A practical walkthrough of five common causes of excessive React re-renders, discovered through real profiler investigation. Covers state living too high in...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5f6304e9b65b0fcc11dcf3c40faeb042?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5f6304e9b65b0fcc11dcf3c40faeb042?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Medium","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":"Medium","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/medium","url":"https://daily.dev/sources/medium_js"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/why-your-react-app-re-renders-too-much-and-how-to-fix-it--6tepumtep","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,react,performance","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Medium","item":"https://daily.dev/sources/medium_js"},{"@type":"ListItem","position":3,"name":"Why Your React App Re-renders Too Much (And How to Fix It)"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/why-your-react-app-re-renders-too-much-and-how-to-fix-it--6tepumtep#faq","mainEntity":[{"@type":"Question","name":"Why does wrapping a component in React.memo not stop it from re-rendering?","acceptedAnswer":{"@type":"Answer","text":"React.memo fails to prevent re-renders when the props it receives are new object, array, or function references on every parent render, since React compares props by reference. Common causes are inline object or array literals passed as props and inline arrow functions used as event handlers. Stabilizing those props with a constant, useMemo, or useCallback before applying React.memo is required for the memoization to actually take effect. Debugging why memoized React components still re-render is a common rabbit hole daily.dev readers can shortcut with practical writeups like this."}},{"@type":"Question","name":"Why does changing one piece of state in a React context provider re-render unrelated components?","acceptedAnswer":{"@type":"Answer","text":"When a context provider creates its value object inline, such as value={{ user, setUser }}, that object is recreated on every render of the provider, so every component consuming that context re-renders even if the specific data it uses did not change. Wrapping the value in useMemo with the correct dependency array, or splitting one large context into separate contexts for auth, theme, and settings, limits re-renders to only the consumers that actually depend on the changed data. For developers chasing unnecessary re-renders through context providers, daily.dev surfaces practical React performance fixes like this."}},{"@type":"Question","name":"Where should I put UI state to avoid re-rendering my whole React dashboard on a single toggle?","acceptedAnswer":{"@type":"Answer","text":"State should live in the smallest component that wraps only the parts of the UI that actually depend on it, not in a top-level parent component. For example, moving filter state out of a top-level Dashboard component into a smaller FilterableSection wrapper means toggling a filter re-renders only the filter bar and data table instead of the entire dashboard, including charts and sidebar. This costs nothing and requires no memoization. daily.dev helps developers compare React state-placement patterns before reaching for memoization to fix render cascades."}}]} ```