--- title: State Management in React: Prop Drilling, Context API,... description: As React apps grow, passing state through deeply nested component trees becomes unwieldy. Prop drilling — threading props through intermediate components that... canonical: https://daily.dev/posts/state-management-in-react-prop-drilling-context-api-react-memo-usememo-and-usecallback-gk6mwanyb twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: State Management in React: Prop Drilling, Context API, React.memo, useMemo, and useCallback | daily.dev og:description: As React apps grow, passing state through deeply nested component trees becomes unwieldy. Prop drilling — threading props through intermediate components that... og:url: https://daily.dev/posts/state-management-in-react-prop-drilling-context-api-react-memo-usememo-and-usecallback-gk6mwanyb og:image: https://api.daily.dev/og/posts/gK6MWAnyb.png og:image:alt: State Management in React: Prop Drilling, Context API, React.memo, useMemo, and useCallback 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. # State Management in React: Prop Drilling, Context API, React.memo, useMemo, and useCallback **[Medium](https://daily.dev/sources/medium_js)** · 13 min read · 2 upvotes · 0 comments ## Summary As React apps grow, passing state through deeply nested component trees becomes unwieldy. Prop drilling — threading props through intermediate components that don't use them — creates noise and fragile refactors. The Context API solves this by letting any component in a subtree read shared data directly via useContext, without manual prop passing. It works best for infrequently-changing global data like auth state, themes, and locale. On the performance side, React re-renders children by default whenever a parent re-renders. React.memo skips re-rendering a component when its props haven't changed (using shallow comparison). useMemo caches expensive computed values between renders, and useCallback caches function references to prevent React.memo from being defeated by new function instances on every render. All three optimization tools carry their own overhead and should be applied only after measuring a real bottleneck with React DevTools Profiler, not as blanket defaults. The guiding principle: keep state at the lowest common ancestor that needs it, use Context for genuinely global data, and add memoization only where the tree has earned it. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## 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 - [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), [#react-hooks](https://daily.dev/tags/react-hooks) [View this post on daily.dev](https://daily.dev/posts/state-management-in-react-prop-drilling-context-api-react-memo-usememo-and-usecallback-gk6mwanyb) ```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":"State Management in React: Prop Drilling, Context API, React.memo, useMemo, and useCallback","url":"https://daily.dev/posts/state-management-in-react-prop-drilling-context-api-react-memo-usememo-and-usecallback-gk6mwanyb","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/state-management-in-react-prop-drilling-context-api-react-memo-usememo-and-usecallback-gk6mwanyb"},"datePublished":"2026-07-21T20:06:05.802Z","dateModified":"2026-07-21T20:07:49.111Z","description":"As React apps grow, passing state through deeply nested component trees becomes unwieldy. Prop drilling — threading props through intermediate components that...","image":"https://media.daily.dev/image/upload/s--ZrL_HSsR--/f_auto/v1722860399/public/Placeholder%2006","thumbnailUrl":"https://media.daily.dev/image/upload/s--ZrL_HSsR--/f_auto/v1722860399/public/Placeholder%2006","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/state-management-in-react-prop-drilling-context-api-react-memo-usememo-and-usecallback-gk6mwanyb","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,react,performance,react-hooks","timeRequired":"PT13M"} {"@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":"State Management in React: Prop Drilling, Context API, React.memo, useMemo, and useCallback"}]} ```