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.
发现更多
deep react knowledge
deep react knowledge
React continues to dominate the frontend development landscape, but mastering its core concepts and advanced patterns is essential for building professional-grade applications. This learning plan is ideal for developers who have basic JavaScript knowledge and want to become proficient React engineers capable of building complex, performant applications.
I want to learn how to write react front end
I want to learn how to write react front end
React continues to be the most popular JavaScript library for building user interfaces, powering millions of web applications. This learning plan takes you from React fundamentals to advanced architecture patterns, ideal for developers looking to build modern, performant front-end applications.
Master Go, React, and JavaScript Development
Master Go, React, and JavaScript Development
This plan is essential for developers aiming to bridge the gap between frontend and backend mastery using modern frameworks. It is ideal for aspiring full-stack engineers who want to build scalable, high-performance applications with Go and React.
Improve the user experience of the app.
Improve the user experience of the app.
This learning plan is essential for product managers and designers looking to bridge the gap between aesthetics and functional business results. It provides a comprehensive roadmap for anyone wanting to master the psychological and data-driven aspects of modern app design.
Stop Overthinking and Take Action
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.
js read
js read
This plan bridges the gap between basic coding and professional web development. It is ideal for aspiring developers looking to master modern JavaScript, from UI interactivity to scalable application architecture.
Teach well, cut friction, ignore signaling.
Teach well, cut friction, ignore signaling.
This plan is designed for educators, designers, and leaders who want to move beyond superficial metrics and performative teaching. It bridges the gap between cognitive science and systems design to help professionals deliver high-impact results with minimal waste.
Stop doomscrolling
Stop doomscrolling
In an era of persuasive design, many struggle with involuntary device usage that erodes mental clarity and productivity. This plan is essential for anyone feeling overwhelmed by their phone who wants to regain control over their attention and mental health.
"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"
