What is the "Two Renders" problem and why is it considered a performance killer?

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.

What is the "Golden Rule" of state management mentioned in the script?

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.

When should a developer use `useMemo` instead of a plain constant?

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.

How does the "key" prop help avoid the "Props-to-State Copy" error?

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.

What is the proper use case for `useEffect` if it shouldn't be used for calculations?

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.

Mastering Minimal State: The Golden Rule of React

21 分钟

24个来源

2026年3月8日

Technology Education Productivity

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.

主持声音

Lena

Jackson

学习风格

趣味

知识来源

Refactoring: Improving the Design of Existing Code

常见问题

由哥伦比亚大学校友在旧金山创建

BeFreed 汇聚了全球超过 20 万求知若渴的学习者

查看更多网络上关于 BeFreed 的讨论

"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."

@Moemenn

"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."

@Chloe, Solo founder, LA

117

"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."

@Raaaaaachelw

"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."

@Matt, YC alum

108

"Reading used to feel like a chore. Now it’s just part of my lifestyle."

@Erin, Investment Banking Associate , NYC

254

"Feels effortless compared to reading. I’ve finished 6 books this month already."

@djmikemoore

"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."

@Pitiful

4.5K

"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."

@SofiaP

"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"

@Jaded_Falcon

201

"It is great for me to learn something from the book without reading it."

@OojasSalunke

"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."

@Leo, Law Student, UPenn

483

"Makes me feel smarter every time before going to work"

@Cashflowbubu

由哥伦比亚大学校友在旧金山创建

BeFreed 汇聚了全球超过 20 万求知若渴的学习者

查看更多网络上关于 BeFreed 的讨论

"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."

@Moemenn

"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."

@Chloe, Solo founder, LA

117

"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."

@Raaaaaachelw

"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."

@Matt, YC alum

108

"Reading used to feel like a chore. Now it’s just part of my lifestyle."

@Erin, Investment Banking Associate , NYC

254

"Feels effortless compared to reading. I’ve finished 6 books this month already."

@djmikemoore

"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."

@Pitiful

4.5K

"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."

@SofiaP

"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"

@Jaded_Falcon

201

"It is great for me to learn something from the book without reading it."

@OojasSalunke

"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."

@Leo, Law Student, UPenn

483

"Makes me feel smarter every time before going to work"

@Cashflowbubu

"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."

@Moemenn

"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."

@Chloe, Solo founder, LA

117

"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."

@Raaaaaachelw

"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."

@Matt, YC alum

108

"Reading used to feel like a chore. Now it’s just part of my lifestyle."

@Erin, Investment Banking Associate , NYC

254

"Feels effortless compared to reading. I’ve finished 6 books this month already."

@djmikemoore

"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."

@Pitiful

4.5K

"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."

@SofiaP

"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"

@Jaded_Falcon

201

"It is great for me to learn something from the book without reading it."

@OojasSalunke

"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."

@Leo, Law Student, UPenn

483

"Makes me feel smarter every time before going to work"

@Cashflowbubu

"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."

@Moemenn

"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."

@Chloe, Solo founder, LA

117

"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."

@Raaaaaachelw

"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."

@Matt, YC alum

108

"Reading used to feel like a chore. Now it’s just part of my lifestyle."

@Erin, Investment Banking Associate , NYC

254

"Feels effortless compared to reading. I’ve finished 6 books this month already."

@djmikemoore

"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."

@Pitiful

4.5K

"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."

@SofiaP

"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"

@Jaded_Falcon

201

"It is great for me to learn something from the book without reading it."

@OojasSalunke

"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."

@Leo, Law Student, UPenn

483

"Makes me feel smarter every time before going to work"

@Cashflowbubu

1.5K Ratings4.7

开启你的学习之旅，就是现在

Mastering Minimal State: The Golden Rule of React

21 分钟

24个来源

2026年3月8日

Technology Education Productivity

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.

核心要点

The State Management Golden Rule

0:00

Lena: Hey Jackson, I was looking at some code earlier and noticed something that felt like a total red flag. A developer was using a useEffect just to filter a list of episodes and save it into a second state variable.

0:13

Jackson: Oh, the classic "Two Renders" problem! It’s easily the most common mistake I see. You dispatch an action, the first state updates, then the effect kicks in and triggers a second render just to sync that derived value. It’s a performance killer and a nightmare for keeping your UI in sync.

0:30

Lena: Exactly! It feels like you're constantly chasing your own tail. But there’s a much cleaner way to handle this, right?

0:37

Jackson: Definitely. The Golden Rule is simple: if you can calculate a value from existing state or props, do not store it in state. Let’s dive into the filtered episodes example to see how we can refactor this.

The Two Renders Performance Trap

Thinking Like a Database Architect

Spotting Red Flags in Your Code

The Architecture of Minimal State

When You Actually Need an Effect

A Practical Playbook for Clean State

Final Reflections on the Render Cycle

此音频课程由 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.

主持声音

Lena

Jackson

学习风格

趣味

知识来源

常见问题

相似内容

The Book You Wish Your Parents Had Read (and Your Children Will Be Glad That You Did)

23 sources

Mastering React: Lifting State Up for Component Coordination

22 min

26 sources

Mastering Controlled Inputs in React

22 min

A Philosophy of Software Design, 2nd Edition

Algorithms + Data Structures eq Programs

26 sources

Mastering React Props: The Blueprint for Dynamic Components

22 min

24 sources

Mastering React Lists: Keys, Maps, and UI Identity

23 min

28 sources

Beyond Flag Soup: Mastering Robust Conditional Rendering

24 min

26 sources

Mastering React Events Without the Ghost Clicks

20 min

Minimalism

Joshua Fields Millburn & Ryan Nicodemus

7 min

Simple Rules

Donald Sull & Kathleen M. Eisenhardt

10 min

由哥伦比亚大学校友在旧金山创建

BeFreed 汇聚了全球超过 20 万求知若渴的学习者

查看更多网络上关于 BeFreed 的讨论

"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."

@Moemenn

"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."

@Chloe, Solo founder, LA

117

"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."

@Raaaaaachelw

"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."

@Matt, YC alum

108

"Reading used to feel like a chore. Now it’s just part of my lifestyle."

@Erin, Investment Banking Associate , NYC

254

"Feels effortless compared to reading. I’ve finished 6 books this month already."

@djmikemoore

"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."

@Pitiful

4.5K

"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."

@SofiaP

"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"

@Jaded_Falcon

201

"It is great for me to learn something from the book without reading it."

@OojasSalunke

"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."

@Leo, Law Student, UPenn

483

"Makes me feel smarter every time before going to work"

@Cashflowbubu

由哥伦比亚大学校友在旧金山创建

BeFreed 汇聚了全球超过 20 万求知若渴的学习者

查看更多网络上关于 BeFreed 的讨论

"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."

@Moemenn

"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."

@Chloe, Solo founder, LA

117

"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."

@Raaaaaachelw

"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."

@Matt, YC alum

108

"Reading used to feel like a chore. Now it’s just part of my lifestyle."

@Erin, Investment Banking Associate , NYC

254

"Feels effortless compared to reading. I’ve finished 6 books this month already."

@djmikemoore

"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."

@Pitiful

4.5K

"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."

@SofiaP

"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"

@Jaded_Falcon

201

"It is great for me to learn something from the book without reading it."

@OojasSalunke

"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."

@Leo, Law Student, UPenn

483

"Makes me feel smarter every time before going to work"

@Cashflowbubu

"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."

@Moemenn

"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."

@Chloe, Solo founder, LA

117

"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."

@Raaaaaachelw

"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."

@Matt, YC alum

108

"Reading used to feel like a chore. Now it’s just part of my lifestyle."

@Erin, Investment Banking Associate , NYC

254

"Feels effortless compared to reading. I’ve finished 6 books this month already."

@djmikemoore

"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."

@Pitiful

4.5K

"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."

@SofiaP

"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"

@Jaded_Falcon

201

"It is great for me to learn something from the book without reading it."

@OojasSalunke

"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."

@Leo, Law Student, UPenn

483

"Makes me feel smarter every time before going to work"

@Cashflowbubu

"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."

@Moemenn

"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."

@Chloe, Solo founder, LA

117

"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."

@Raaaaaachelw

"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."

@Matt, YC alum

108

"Reading used to feel like a chore. Now it’s just part of my lifestyle."

@Erin, Investment Banking Associate , NYC

254

"Feels effortless compared to reading. I’ve finished 6 books this month already."

@djmikemoore

"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."

@Pitiful

4.5K

"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."

@SofiaP

"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"

@Jaded_Falcon

201

"It is great for me to learn something from the book without reading it."

@OojasSalunke

"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."

@Leo, Law Student, UPenn

483

"Makes me feel smarter every time before going to work"

@Cashflowbubu

1.5K Ratings4.7

开启你的学习之旅，就是现在

Mastering Minimal State: The Golden Rule of React

Mastering Minimal State: The Golden Rule of React最佳语录

此音频课程由 BeFreed 社区成员创建

常见问题

What is the "Two Renders" problem and why is it considered a performance killer?

What is the "Golden Rule" of state management mentioned in the script?

When should a developer use useMemo instead of a plain constant?

How does the "key" prop help avoid the "Props-to-State Copy" error?

Mastering Minimal State: The Golden Rule of React

Mastering Minimal State: The Golden Rule of React最佳语录

核心要点

The State Management Golden Rule

The Two Renders Performance Trap

Thinking Like a Database Architect

Spotting Red Flags in Your Code

The Architecture of Minimal State

When You Actually Need an Effect

A Practical Playbook for Clean State

Final Reflections on the Render Cycle

此音频课程由 BeFreed 社区成员创建

常见问题

What is the "Two Renders" problem and why is it considered a performance killer?

What is the "Golden Rule" of state management mentioned in the script?

When should a developer use useMemo instead of a plain constant?

How does the "key" prop help avoid the "Props-to-State Copy" error?

相似内容

核心要点

The State Management Golden Rule

The Two Renders Performance Trap

Thinking Like a Database Architect

Spotting Red Flags in Your Code

The Architecture of Minimal State

When You Actually Need an Effect

A Practical Playbook for Clean State

Final Reflections on the Render Cycle

相似内容