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

相似内容