What is "synchronization drift" and why is it a problem in React?

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.

How can I determine if a value should be stored in state or derived?

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.

When is it appropriate to use the `useMemo` hook for derived values?

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`.

Why is the "State + Effect" pattern considered a red flag?

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.

React State Mistakes: Stop Storing Derived Data

22分

2026年3月31日

Technology Education Productivity

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.

ホストの声

Lena

Jackson

学習スタイル

ファン

知識ソース

A Philosophy of Software Design, 2nd Edition

よくある質問

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

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

今すぐ学習の旅を始めよう

React State Mistakes: Stop Storing Derived Data

22分

2026年3月31日

Technology Education Productivity

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.

重要なポイント

The Danger of Duplicated State

0:00

Lena: Hey Jackson! I was looking through some component code earlier and noticed something that felt like a total "wait, why am I doing this?" moment. I had a list of episodes in state, and then a second state just for the filtered version of that same list.

0:14

Jackson: Oh, the classic duplicated state trap! It’s easily the most common mistake in React. We think we’re being organized by giving the filtered list its own home, but we’re actually just creating a "synchronization drift."

0:27

Lena: Exactly! It’s like trying to keep two different clocks in sync manually. If one shifts, the whole UI starts showing stale data.

0:34

Jackson: Right, and it doubles your re-renders for no reason. The golden rule is simple: if you can calculate it from existing state, don’t store it. Let’s dive into how we can turn that filteredEpisodes mess into a clean, derived value.

The Synchronization Drift Trap

The Mental Model of Pure Transformations

When to Reach for Memoization

The Architecture of a Data Table

Practical Playbook for Clean State

Beyond the Component Boundary

Closing Reflection and Wrap-up

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

24 sources

Mastering Minimal State: The Golden Rule of React

21 min

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

Accelerate: The Science of Lean Software and DevOps

24 sources

React architecture is more than just code

22 min

26 sources

React State: Why Your Components Need Internal Memory

31 min

24 sources

Mastering React Lists: Keys, Maps, and UI Identity

23 min

24 sources

React Data Fetching: A Recipe for Resilient Apps

23 min

Refactoring

Martin Fowler

9 min

Mistakes Were Made

Carol Tavris & Elliot Aronson

9 min

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

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

今すぐ学習の旅を始めよう

React State Mistakes: Stop Storing Derived Data

React State Mistakes: Stop Storing Derived Dataのベスト引用

このオーディオレッスンはBeFreedコミュニティメンバーが作成しました

よくある質問

What is "synchronization drift" and why is it a problem in React?

How can I determine if a value should be stored in state or derived?

When is it appropriate to use the useMemo hook for derived values?

Why is the "State + Effect" pattern considered a red flag?

React State Mistakes: Stop Storing Derived Data

React State Mistakes: Stop Storing Derived Dataのベスト引用

重要なポイント

The Danger of Duplicated State

The Synchronization Drift Trap

The Mental Model of Pure Transformations

When to Reach for Memoization

The Architecture of a Data Table

Practical Playbook for Clean State

Beyond the Component Boundary

Closing Reflection and Wrap-up

このオーディオレッスンはBeFreedコミュニティメンバーが作成しました

よくある質問

What is "synchronization drift" and why is it a problem in React?

How can I determine if a value should be stored in state or derived?

When is it appropriate to use the useMemo hook for derived values?

Why is the "State + Effect" pattern considered a red flag?

関連コンテンツ

重要なポイント

The Danger of Duplicated State

The Synchronization Drift Trap

The Mental Model of Pure Transformations

When to Reach for Memoization

The Architecture of a Data Table

Practical Playbook for Clean State

Beyond the Component Boundary

Closing Reflection and Wrap-up

関連コンテンツ