Derived State in React

1. What is Derived State?

The derived state describes a state calculated from an existing state or props rather than being kept separately.

Key Idea: Instead of creating multiple pieces of state, compute values from existing state to avoid unnecessary updates and re-renders.

2. Why Use Derived State?

🚨 Problems with Redundant State

If we create unnecessary state variables:

1. State Synchronization Issues

   1. When multiple states depend on each other, they must be updated to stay in sync.

   2. The UI may show incorrect data if one state is updated and another isn't.

2. Unnecessary Re-renders

   1. Each `useState` update triggers a separate re-render.

   2. If multiple dependent state variables are updated separately, React will re-render the component multiple times, causing performance issues.

✅ Benefits of Derived State

• Keeps state in sync automatically

• Reduces the number of re-renders

• Improves code simplicity and maintainability

5. When to Use Derived State

🔹 Use derived state when:

• The value can be calculated from the existing state or props.

• You want to avoid unnecessary re-renders.

• You need to keep dependent state values in sync

🔹 Do NOT use derived state when:

• The value requires user interaction to change.

• The value cannot be calculated from existing data.

• The computation is expensive (complex calculations, API calls, etc.) → Use `useMemo`.

📌 Key Takeaways

• ✅ Avoid storing unnecessary state—only store data that cannot be computed.

• ✅ Use derived state whenever a value depends on existing state or props.

• ✅ Use `useMemo` for optimizing expensive calculations.