Mastering Minimal State: The Golden Rule of React
Stop the 'Two Renders' trap by learning why derived data belongs in variables, not state. Using the filtered episodes example, we reveal how to streamline performance and simplify your React architecture.
Mastering Minimal State: The Golden Rule of React最佳语录
The Golden Rule is simple: if you can calculate a value from existing state or props, do not store it in state. Your component is basically a mini-database where the state is your raw data and everything else is just a view of that data.
此音频课程由 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.
常见问题
The "Two Renders" problem occurs when a developer uses an effect to update a second state variable based on a change in the first. For example, if a user types in a search box, React performs the first render to update the search query state. Only after that render is committed does the useEffect fire to filter the list and call a second state setter, which immediately triggers a second render. This process can cause a visible flash of incorrect data and doubles the workload for the browser's layout engine, leading to a "sticky" or laggy UI.
The Golden Rule is that if a value can be calculated from existing state or props, you should not store it in a new state variable. Instead of using useState and useEffect to sync derived data, you should calculate the value directly within the component body during the render phase using a simple JavaScript constant. This ensures that the UI always stays in sync with the source of truth and avoids the overhead of unnecessary lifecycle management.
While most calculations like filtering or mapping a few thousand items are fast enough to happen during every render, useMemo should be used as a performance hint for truly expensive transformations. It allows React to cache the result of a calculation and only re-run it when specific dependencies change. However, the script emphasizes that useMemo is not for storing state; it is a tool to skip unnecessary work. Developers should start with a plain calculation and only add useMemo if the UI feels measurably laggy.
The "Props-to-State Copy" error happens when a child component initializes internal state from a prop but fails to update when that prop changes. Rather than using a useEffect to manually sync the prop to the state, a cleaner architectural move is to use a key prop on the component. When the value of the key (such as a user ID) changes, React will discard the old component instance and its stale state, creating a fresh version of the component with the new prop values initialized correctly.
The primary job of useEffect is to synchronize the component with external systems that live outside of React's render cycle. This includes tasks like making network requests to an API, interacting with localStorage, setting up timers, or manual DOM manipulations. If the logic is internal to the app—such as sorting a list, validating a form, or calculating a total—it is a calculation that belongs in the render path, not in an effect.
发现更多
Essentialism Book Summary: Achieve More by Doing Less
Master the art of doing less but better with this Essentialism summary—key takeaways to help you focus, simplify, and achieve more in 2025.
BeFreed Team
Master Learning: Dark Triad & Neural Models
This interdisciplinary plan bridges the gap between behavioral psychology and computational neuroscience to provide a unique edge in the modern digital landscape. It is ideal for professionals and tech enthusiasts who want to master both human influence and machine learning logic to navigate complex social and technical environments.
Master One Project to Prevent Burnout
In an era of constant connectivity, professionals often mistake busyness for productivity, leading to chronic exhaustion. This plan is designed for high-achievers and creative professionals who need to reclaim their focus and prevent burnout by mastering the power of single-project excellence.
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.
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.
Become a frontend React developer
This path is essential for aspiring developers looking to bridge the gap between basic coding and professional frontend engineering. It provides a structured journey from web basics to complex React architecture, making it ideal for career switchers and computer science students.
The Minimalist Self-Management Protocol
This protocol is designed for professionals and creatives overwhelmed by digital noise and decision fatigue. It provides a streamlined framework to reclaim mental clarity and productivity by focusing on high-impact habits rather than complex systems.
Master CS, DSA & Reduce AI Reliance
In an era of AI-driven development, deep foundational knowledge is what separates elite engineers from the rest. This plan is designed for developers who want to reclaim their technical independence by mastering the underlying principles of systems and algorithms.
"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"
