Redux & Redux Toolkit Course
Redux & Redux Toolkit
/
Intermediate

Derived State

Definition

Data that is computed or calculated on-the-fly from the existing state, rather than being explicitly stored in the Redux store.

Explain Like I'm New

If you have an array of 5 todo items in Redux, and 3 are finished, you DO NOT store `completedCount: 3` in Redux. You just store the list. The selector calculates the `3` dynamically whenever the component asks for it.

Real World Example

A shopping cart has an array of items with prices. You don't store the `totalPrice` in Redux. A selector calculates `items.reduce((total, item) => total + item.price)` dynamically.

Common Use Cases

  • •Preventing duplicated/out-of-sync data
  • •Keeping the Redux store minimal

Interactive Example

Loading...
Console output will appear here...

Interview Questions

basic

  • Why is it bad to store `filteredList` and `fullList` in Redux at the same time?

intermediate

  • What is the performance risk of calculating derived state directly inside `useSelector`?

Flash Cards

Question

Why bad?

Click to reveal answer
Answer

Because it creates redundant data. If you delete an item from `fullList`, you have to remember to ALSO delete it from `filteredList`. If you forget, the app crashes. Only store the source of truth, and compute the rest.

Question

Performance risk?

Click to reveal answer
Answer

If the calculation is heavy (like sorting 10,000 items), it will run every single time the component re-renders, severely lagging the application.