React State Mistakes: Stop Storing Derived Data
Managing filtered lists in state often leads to bugs and extra renders. Learn why calculating values on the fly keeps your UI in sync and your code clean.
React State Mistakes: Stop Storing Derived Data最佳语录
The golden rule is simple: if you can calculate it from existing state, don’t store it. When you store derived data in state, you are essentially adding a middleman that creates synchronization drift.
此音频课程由 BeFreed 社区成员创建
Teach why you should not store calculated values in state. Use filteredEpisodes example. Give rule: if you can calculate it from existing state, don’t store it.
常见问题
Synchronization drift occurs when a developer stores derived data in a separate state variable, such as keeping a filteredList state alongside a rawData state. This creates a situation where two "clocks" must be manually kept in sync. If a developer forgets to update the second state when the first one changes—like when new data arrives from a server—the UI will display stale or incorrect information. This approach also often leads to "double renders" because React must first render the change to the source state and then trigger a second render once a useEffect updates the derived state.
The golden rule is that if a value can be calculated from existing props or state, it should not be stored in its own state. You should treat your component as a pure function where props and raw data are the "sources of truth" and everything else is a "transformation." For example, instead of using useState for a boolean like isEmpty, you should simply calculate const isEmpty = data.length === 0 directly in the component body. This ensures the UI is always a direct, accurate reflection of the underlying data.
While most JavaScript array operations like filtering or sorting are fast enough to run on every render, useMemo should be used in two specific scenarios. First, it acts as a "sticky note" for expensive calculations that take longer than one millisecond, preventing them from re-running unless their specific dependencies change. Second, it is used to maintain "referential equality." Since React compares objects and arrays by reference, useMemo ensures that a derived array maintains the same identity across renders, preventing unnecessary re-render waterfalls in child components wrapped in React.memo.
The "State + Effect" combo—where a useState hook is immediately followed by a useEffect that updates a different state—is a primary indicator of duplicated state. This pattern adds unnecessary cognitive load to the code and makes it harder to test because the logic is trapped inside lifecycle hooks. By refactoring this into a simple variable or a derived calculation, you remove the "middleman," reduce the lines of code, and eliminate the possibility of "impossible states" where different parts of the UI disagree with each other.
发现更多
Learn React, speaking, and interview skills
In today's competitive tech landscape, technical proficiency alone is rarely enough for rapid career growth. This learning plan is designed for developers who want to bridge the gap between building robust React applications and communicating their expertise effectively to land top-tier roles.
I want to learn react native
React Native is one of the most in-demand skills for mobile development, allowing developers to build iOS and Android apps with a single codebase. This learning plan is ideal for JavaScript developers looking to break into mobile development, web developers wanting to expand their skillset, or anyone seeking to build professional cross-platform mobile applications efficiently.
Break the Algorithmic Loop
In an era of persuasive design, our attention is often hijacked by sophisticated algorithms. This plan is essential for professionals and students who feel drained by digital distractions and want to regain cognitive control using proven behavioral science.
Stop Overthinking and Take Action
Overthinking traps millions in endless loops of analysis that prevent meaningful progress and cause unnecessary stress. This learning plan equips anyone struggling with decision paralysis or procrastination with practical tools to break free from mental gridlock and take consistent, purposeful action.
Reclaim Your Attention
In an era of persuasive design, our focus is often hijacked by addictive algorithms. This plan is essential for professionals and students who feel drained by screen time and want to regain cognitive control through practical, science-based interventions.
Logic and Layout in Windows Forms
This plan is essential for developers looking to move beyond simple UI design into functional application architecture. It is ideal for those building desktop tools who need to balance intuitive user layouts with robust backend decision-making logic.
Stop overthinking & hit flow state on demand
This plan is essential for professionals and creatives struggling with mental fatigue and procrastination. It offers a scientific roadmap to transition from cognitive overload to effortless, high-level productivity.
Overthinking stoppen & Handlungsfähigkeit 1.0
This plan is designed for professionals and individuals who feel stuck in a cycle of rumination and indecision. It bridges the gap between cognitive theory and practical action, making it essential for anyone looking to reclaim their mental energy and act with conviction.
"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."
"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."
"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."
"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."
"Reading used to feel like a chore. Now it’s just part of my lifestyle."
"Feels effortless compared to reading. I’ve finished 6 books this month already."
"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."
"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."
"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"
"It is great for me to learn something from the book without reading it."
"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."
"Makes me feel smarter every time before going to work"
"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."
"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."
"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."
"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."
"Reading used to feel like a chore. Now it’s just part of my lifestyle."
"Feels effortless compared to reading. I’ve finished 6 books this month already."
"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."
"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."
"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"
"It is great for me to learn something from the book without reading it."
"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."
"Makes me feel smarter every time before going to work"
"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."
"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."
"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."
"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."
"Reading used to feel like a chore. Now it’s just part of my lifestyle."
"Feels effortless compared to reading. I’ve finished 6 books this month already."
"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."
"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."
"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"
"It is great for me to learn something from the book without reading it."
"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."
"Makes me feel smarter every time before going to work"
"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."
"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."
"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."
"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."
"Reading used to feel like a chore. Now it’s just part of my lifestyle."
"Feels effortless compared to reading. I’ve finished 6 books this month already."
"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."
"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."
"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"
"It is great for me to learn something from the book without reading it."
"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."
"Makes me feel smarter every time before going to work"
