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分

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

学習スタイル

ファン

知識ソース

よくある質問

もっと発見

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.

2 h 22 m•3 セクション

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.

4 h 5 m•4 セクション

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.

3 h 42 m•4 セクション

Master CS, DSA & Reduce AI Reliance

学習プラン

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.

3 h 8 m•4 セクション

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.

2 h 38 m•4 セクション

Finish game projects with discipline & focus

学習プラン

Finish game projects with discipline & focus

This learning plan addresses the critical gap between having creative game ideas and actually bringing them to completion. It's designed for aspiring game designers and developers who struggle with project consistency, frequently abandon projects midway, or find their creative ambitions undermined by poor habits and energy management. By combining game design mastery with productivity systems and sustainable health practices, this plan equips you to not just understand what makes great games, but to develop the discipline and stamina to actually create them.

2 h 12 m•4 セクション

Master Stoicism: Become Like Ayanokoji

学習プラン

Master Stoicism: Become Like Ayanokoji

This plan is designed for individuals seeking the extreme mental clarity and strategic composure seen in high-performing analytical minds. It bridges ancient Stoic wisdom with modern psychological awareness to build a foundation of absolute self-control and social intelligence.

3 h 5 m•4 セクション

Become master of my emotions

学習プラン

Become master of my emotions

In an increasingly high-pressure world, the ability to regulate one's internal state is a critical life skill for personal and professional success. This plan is designed for individuals seeking to move beyond reactive habits and cultivate a disciplined, Stoic-inspired approach to life's challenges.

3 h 5 m•4 セクション

コロンビア大学卒業生がサンフランシスコで開発

BeFreedは1,000,000の好奇心旺盛な仲間が集うグローバルコミュニティ

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は1,000,000の好奇心旺盛な仲間が集うグローバルコミュニティ

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分

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

0:13

0:30

0:37

The Two Renders Performance Trap

0:50

1:23

1:32

2:01

2:06

2:31

2:39

2:58

3:04

3:27

3:31

Thinking Like a Database Architect

3:48

4:10

0:30

4:37

4:53

5:19

5:29

5:48

5:55

6:21

6:25

6:48

2:06

Spotting Red Flags in Your Code

7:07

7:29

7:48

7:54

8:13

8:23

8:50

8:57

9:17

2:06

9:47

9:56

The Architecture of Minimal State

10:12

10:32

10:43

11:00

8:57

11:31

11:42

12:02

12:12

12:31

2:06

12:53

13:07

When You Actually Need an Effect

13:15

13:28

13:36

13:54

14:02

14:21

14:29

14:49

3:31

15:14

15:23

15:38

8:57

A Practical Playbook for Clean State

15:57

16:13

2:06

16:39

8:23

17:10

17:15

17:30

17:38

17:54

18:01

18:12

18:20

Final Reflections on the Render Cycle

18:29

18:45

18:59

19:14

15:23

19:35

19:46

19:57

20:06

20:15

20:21

0:37

20:43

20:52

このオーディオレッスンは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

学習スタイル

ファン

知識ソース

よくある質問

もっと発見

deep react knowledge

学習プラン

deep react knowledge

2 h 22 m•3 セクション

Master Go, React, and JavaScript Development

学習プラン

Master Go, React, and JavaScript Development

4 h 5 m•4 セクション

I want to learn how to write react front end

学習プラン

I want to learn how to write react front end

3 h 42 m•4 セクション

Master CS, DSA & Reduce AI Reliance

学習プラン

Master CS, DSA & Reduce AI Reliance

3 h 8 m•4 セクション

Improve the user experience of the app.

学習プラン

Improve the user experience of the app.

2 h 38 m•4 セクション

Finish game projects with discipline & focus

学習プラン

Finish game projects with discipline & focus

2 h 12 m•4 セクション

Master Stoicism: Become Like Ayanokoji

学習プラン

Master Stoicism: Become Like Ayanokoji

3 h 5 m•4 セクション

Become master of my emotions

学習プラン

Become master of my emotions

3 h 5 m•4 セクション

コロンビア大学卒業生がサンフランシスコで開発

BeFreedは1,000,000の好奇心旺盛な仲間が集うグローバルコミュニティ

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は1,000,000の好奇心旺盛な仲間が集うグローバルコミュニティ

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?

もっと発見

deep react knowledge

Master Go, React, and JavaScript Development

I want to learn how to write react front end

Master CS, DSA & Reduce AI Reliance

Improve the user experience of the app.

Finish game projects with discipline & focus

Master Stoicism: Become Like Ayanokoji

Become master of my emotions

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?

もっと発見

deep react knowledge

Master Go, React, and JavaScript Development

I want to learn how to write react front end

Master CS, DSA & Reduce AI Reliance

Improve the user experience of the app.

Finish game projects with discipline & focus

Master Stoicism: Become Like Ayanokoji

Become master of my emotions

重要なポイント

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

関連コンテンツ