--- title: Stop using "useEffect" to derive state. Compute it... description: Deriving values from existing state or props shouldn't require useEffect plus setState, since that pattern adds an extra render, causes a flash of stale UI,... canonical: https://daily.dev/posts/stop-using-useeffect-to-derive-state-compute-it-during-render--apzjgifvm twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Stop using "useEffect" to derive state. Compute it during render. | daily.dev og:description: Deriving values from existing state or props shouldn't require useEffect plus setState, since that pattern adds an extra render, causes a flash of stale UI,... og:url: https://daily.dev/posts/stop-using-useeffect-to-derive-state-compute-it-during-render--apzjgifvm og:image: https://api.daily.dev/og/posts/APzJgIFVm.png og:image:alt: Stop using "useEffect" to derive state. Compute it during render. 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. # Stop using "useEffect" to derive state. Compute it during render. **[Sandhya K](https://daily.dev/sources/f8a71aothmgqz4gvfzpti)** · [@sandhyak](https://daily.dev/sandhyak) · 1 min read · 183 upvotes · 16 comments ## Summary Deriving values from existing state or props shouldn't require useEffect plus setState, since that pattern adds an extra render, causes a flash of stale UI, and risks state drifting out of sync. Instead, compute derived values directly during render, and only reach for useMemo when the computation is genuinely expensive. Effects should be reserved for syncing with external systems, not for syncing state with other state. ## Content  If a value can be calculated from existing state or props, it doesn't need its own state. Using `useEffect` + `setState` to derive it means an extra render, a flash of stale UI, and one more thing that can drift out of sync. Just compute it during render. If it's genuinely expensive, wrap it in `useMemo`. Effects are for syncing with the outside world, not for syncing state with other state. ## Community discussion Top comments from developers on daily.dev. **@confidentcoding** · 3 upvotes > I've always understood it to be an "escape hatch" from React's rendering cycle, which is great for fetching data, but not so great for many other purposes and is used to "get around" the issues that re-renders bring, instead of attempting to understand the mechanics of why the re-rendering is happening in the first place, and composing the components properly. > > I've related it to using !important in CSS: it's absolutely clutch for certain situations, but it otherwise complicates the overall code, bucks the natural order of things (in CSS' case, specificity) and makes debugging harder if you... **@menard\_codes** · 3 upvotes > great advice, many devs still miss it but it's in the React docs that derived states don't need their own state, just store them in variables. Many devs still miss this part > > [https://react.dev/learn/choosing-the-state-structure#avoid-redundant-state](https://react.dev/learn/choosing-the-state-structure#avoid-redundant-state) **@ristotoldsep** · 2 upvotes > If it can be calculated during render, the effect is just extra paperwork. **@paulvasile** · 2 upvotes > Who even does that? **@lokeshjothiram** · 2 upvotes > Insightful Information. ## Similar posts on daily.dev - [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 - [React has changed, your Hooks should too – Frontend Masters Blog](https://daily.dev/posts/react-has-changed-your-hooks-should-too-frontend-masters-blog-zyf4bnedj) · Frontend Masters · 52 upvotes · 6 comments - [React has changed, your Hooks should too](https://daily.dev/posts/react-has-changed-your-hooks-should-too-hokoxoemk) · Matt Smith · 38 upvotes · 5 comments - [How to Simplify Your React Components with Derived State](https://daily.dev/posts/how-to-simplify-your-react-components-with-derived-state-rkhbxxxu4) · freeCodeCamp · 6 upvotes · 0 comments - [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 --- Tags: [#react](https://daily.dev/tags/react) [View this post on daily.dev](https://daily.dev/posts/stop-using-useeffect-to-derive-state-compute-it-during-render--apzjgifvm) ```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":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/stop-using-useeffect-to-derive-state-compute-it-during-render--apzjgifvm","headline":"Stop using \"useEffect\" to derive state. Compute it during render.","text":"Deriving values from existing state or props shouldn't require useEffect plus setState, since that pattern adds an extra render, causes a flash of stale UI, and risks state drifting out of sync. Instead, compute derived values directly during render, and only reach for useMemo when the computation is genuinely expensive. Effects should be reserved for syncing with external systems, not for syncing state with other state.","url":"https://daily.dev/posts/stop-using-useeffect-to-derive-state-compute-it-during-render--apzjgifvm","datePublished":"2026-09-28T06:02:05.129Z","dateModified":"2026-09-28T06:02:18.236Z","author":{"@type":"Person","name":"Sandhya K","url":"https://daily.dev/sandhyak","image":"https://media.daily.dev/image/upload/s--SE6L2St6--/f_auto/v1788238316/avatars/avatar_F8a71aOthmGqz4gVFZpTi?_a=BAMAMicg0","description":"Full-stack AI Engineer","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":2340}},"interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":183},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":16}],"comment":[{"@type":"Comment","text":"I’ve always understood it to be an “escape hatch” from React’s rendering cycle, which is great for fetching data, but not so great for many other purposes and is used to “get around” the issues that re-renders bring, instead of attempting to understand the mechanics of why the re-rendering is happening in the first place, and composing the components properly.\nI’ve related it to using !important in CSS: it’s absolutely clutch for certain situations, but it otherwise complicates the overall code, bucks the natural order of things (in CSS’ case, specificity) and makes debugging harder if you lean on it too much.","datePublished":"2026-09-28T20:42:09.416Z","url":"https://daily.dev/posts/APzJgIFVm#c-cPYNCErWc","author":{"@type":"Person","name":"Lars Faye | Confident Coding","url":"https://daily.dev/confidentcoding","image":"https://media.daily.dev/image/upload/s--OGZu5DEc--/f_auto/v1772569630/avatars/avatar_umWZ9aQAng34qk5aaJl2q?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"great advice, many devs still miss it but it’s in the React docs that derived states don’t need their own state, just store them in variables. Many devs still miss this part\nhttps://react.dev/learn/choosing-the-state-structure#avoid-redundant-state","datePublished":"2026-09-28T17:26:36.777Z","url":"https://daily.dev/posts/APzJgIFVm#c-qdKm7I6uX","author":{"@type":"Person","name":"Menard Maranan","url":"https://daily.dev/menard_codes","image":"https://avatars.githubusercontent.com/u/66345147?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"If it can be calculated during render, the effect is just extra paperwork.","datePublished":"2026-09-28T09:41:26.605Z","url":"https://daily.dev/posts/APzJgIFVm#c-ggDR3Fv29","author":{"@type":"Person","name":"Risto Tõldsep","url":"https://daily.dev/ristotoldsep","image":"https://lh3.googleusercontent.com/a/ACg8ocLDWc6mZn0JwNmXXw6WY0L_HJ6pegzRttooC5VgtXESHSj3MNYx=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Who even does that?","datePublished":"2026-09-29T09:55:17.158Z","url":"https://daily.dev/posts/APzJgIFVm#c-lveC2yraw","author":{"@type":"Person","name":"Paul Vasile","url":"https://daily.dev/paulvasile","image":"https://lh3.googleusercontent.com/a/ACg8ocLb1NRaUyJcnimfMzKBMkQvvObhEegoAuRKlUIqttoRHlw=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Insightful Information.","datePublished":"2026-09-28T06:08:48.522Z","url":"https://daily.dev/posts/APzJgIFVm#c-oy7kMyiSp","author":{"@type":"Person","name":"Lokesh Jothiram","url":"https://daily.dev/lokeshjothiram","image":"https://lh3.googleusercontent.com/a/ACg8ocLyUYoVYN4mVyxiG6j9gzod-MpvOCE-NTBFtTHiNb5K2ZNQwA=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/sources/f8a71aothmgqz4gvfzpti","name":"Sandhya K"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sandhya K","item":"https://daily.dev/sources/f8a71aothmgqz4gvfzpti"},{"@type":"ListItem","position":3,"name":"Stop using \"useEffect\" to derive state. Compute it during render."}]} ```