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.
Meilleure citation de 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.
Cette leçon audio a été créée par un membre de la communauté 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.
Foire aux questions
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.
Découvrir plus
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
Minimalist Athlete: World-Class Performance
This program is designed for athletes who want to maximize their physical output without unnecessary complexity. It bridges the gap between foundational stability and high-speed reactive agility, making it essential for competitive basketball and field athletes.
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.
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
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.
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 Focus Framework
In an era of digital distraction, this framework is essential for professionals and creatives struggling with burnout and fragmented attention. It provides a practical roadmap to strip away non-essential tasks and reclaim the mental space needed for high-level execution.
Cree par des anciens de Columbia University a San Francisco
"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"
Cree par des anciens de Columbia University a San Francisco
"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"
