What is "synchronization drift" in React components?

Synchronization drift occurs when a developer stores derived data in a separate state variable instead of calculating it during render. This creates two different "clocks" or sources of truth that must be manually kept in sync, often via `useEffect`. If the primary state updates but the secondary state fails to update correctly or timely, the UI displays stale or inconsistent data, such as a filtered list that does not include newly added items.

Why is using `useEffect` to sync state considered an anti-pattern?

Using `useEffect` to update a second state variable based on a first one forces React to perform unnecessary work. Because effects run after the render is committed to the screen, the component renders once with old data, triggers the effect, updates the state, and then renders a second time. This doubles the rendering overhead and increases cognitive load for developers who must hunt through effects to understand how data is being transformed.

When should I use `useMemo` instead of a standard variable?

You should calculate derived values as simple variables by default because JavaScript is extremely fast at processing arrays of several thousand items. You should only reach for `useMemo` if the calculation is objectively expensive—typically taking more than one millisecond—or if you need to maintain "referential equality." Maintaining a stable reference is important when passing an object or array to a child component wrapped in `React.memo` to prevent that child from re-rendering needlessly.

How does the "Derived Data Computation" layer improve table architecture?

In a clean architecture, user interactions like sorting or searching only update the "source" state, such as a string or a sort key. A separate derivation layer then takes that raw data and the current "lenses" to produce the final visible list. This decouples the logic so that the sorting function doesn't need to know about the search logic, making the code easier to maintain, test in isolation, and less prone to "impossible states" where counts and lists disagree.

What are the primary "red flags" that indicate state should be refactored?

The most common red flag is the "State + Effect" combo, where a `useState` hook is immediately followed by a `useEffect` that calls a setter for a different state. Another major warning sign is the "Prop Sync" trap, where a component copies a passed-in prop into its own local state. Unless you are creating a specific "draft" for editing, you should use props directly or derive new values from them to ensure the child component stays in sync with the parent.

React state mistakes and why you should derive data

22 min

Mar 31, 2026

Technology Education Productivity

Storing filtered lists in state often leads to bugs. Learn why calculating values from existing state prevents sync issues and keeps your UI clean.

Best quote from React state mistakes and why you should derive 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 creating a 'synchronization drift' where your UI can show stale or inconsistent data.

This audio lesson was created by a BeFreed community member

Input question

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.

Host voices

Lena

Jackson

Learning style

Fun

Knowledge sources

A Philosophy of Software Design, 2nd Edition

Frequently Asked Questions

From Columbia University alumni built in San Francisco

BeFreed Brings Together A Global Community Of 1,000,000 Curious Minds

See more on how BeFreed is discussed across the web

"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

From Columbia University alumni built in San Francisco

BeFreed Brings Together A Global Community Of 1,000,000 Curious Minds

See more on how BeFreed is discussed across the web

"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

Start your learning journey, now

React state mistakes and why you should derive data

22 min

Mar 31, 2026

Technology Education Productivity

Storing filtered lists in state often leads to bugs. Learn why calculating values from existing state prevents sync issues and keeps your UI clean.

Best quote from React state mistakes and why you should derive 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 creating a 'synchronization drift' where your UI can show stale or inconsistent data.

Key Takeaways

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

This audio lesson was created by a BeFreed community member

Input question

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.

Host voices

Lena

Jackson

Learning style

Fun

Knowledge sources

Frequently Asked Questions

More like this

Refactoring: Improving the Design of Existing Code

24 sources

Mastering Minimal State: The Golden Rule of React

21 min

24 sources

React Data Fetching: A Recipe for Resilient Apps

23 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

25 sources

React State: Why Your Components Need Internal Memory

31 min

Accelerate: The Science of Lean Software and DevOps

24 sources

React architecture is more than just code

22 min

24 sources

Mastering React Lists: Keys, Maps, and UI Identity

23 min

9 min

9 min

From Columbia University alumni built in San Francisco

BeFreed Brings Together A Global Community Of 1,000,000 Curious Minds

See more on how BeFreed is discussed across the web

"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

From Columbia University alumni built in San Francisco

BeFreed Brings Together A Global Community Of 1,000,000 Curious Minds

See more on how BeFreed is discussed across the web

"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

Start your learning journey, now

React state mistakes and why you should derive data

Best quote from React state mistakes and why you should derive data

This audio lesson was created by a BeFreed community member

Frequently Asked Questions

What is "synchronization drift" in React components?

Why is using useEffect to sync state considered an anti-pattern?

When should I use useMemo instead of a standard variable?

How does the "Derived Data Computation" layer improve table architecture?

React state mistakes and why you should derive data

Best quote from React state mistakes and why you should derive data

Key Takeaways

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

This audio lesson was created by a BeFreed community member

Frequently Asked Questions

What is "synchronization drift" in React components?

Why is using useEffect to sync state considered an anti-pattern?

When should I use useMemo instead of a standard variable?

How does the "Derived Data Computation" layer improve table architecture?

More like this

Key Takeaways

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

More like this