What is derived state in react ?
Derived state is data that a React component computes from its existing props or state, rather than being stored as a separate state variable. The modern approach uses direct computation during rendering, while the legacy approach used getDerivedStateFromProps lifecycle method.
Derived state in React refers to any data that a component computes based on its existing props or state, rather than being stored or managed as an independent state variable. Instead of duplicating data and risking inconsistencies, derived state is calculated directly during the rendering phase, ensuring it always stays in sync with its sources. React provides two main ways to handle derived state: the modern recommended approach using direct computation, and the legacy approach using the getDerivedStateFromProps lifecycle method, which is now considered an anti-pattern in most cases.
- 1
Formatting data: Transforming dates, currencies, or strings for display (e.g., formatting a timestamp into a readable date).
- 2
Filtering or sorting: Computing a subset of data based on user input (e.g., filtering a list by a search term).
- 3
Combining data: Merging information from multiple props or state values (e.g., creating a full name from first and last names).
- 4
Conditional visibility: Determining if an element should be shown based on props or state (e.g., checking if a user has admin privileges).
- 1
Memoizing expensive calculations: Use
useMemoto prevent recomputing derived data on every render. - 2
Computing data based on props that change rarely: Even then, direct computation is simpler and less error-prone than storing derived state.
- 3
Any situation where you are tempted to use
getDerivedStateFromProps: The React documentation explicitly recommends against this pattern, as it often leads to bugs and complexity .
The most common mistake is using derived state to mirror props, which is often unnecessary and leads to bugs. If you find yourself storing props in state, ask whether you can use the props directly during rendering . For memoization of expensive computations, useMemo is the correct tool, not derived state stored in useState. The React team explicitly advises against using getDerivedStateFromProps for most use cases, as it often indicates a misunderstanding of React's data flow and leads to fragile components .
Scenario Questions
0-2 years experience
- 1You need to display the total price of items in a cart component. How would you implement that without storing the total in state?
- 2If you store a filtered list of items in state as well as the original list, what problems arise when the original list changes?
- 3What happens if you use useEffect to update a derived piece of state every time its source props change?
2-5 years experience
- 1We have a component that receives a list of users and filters them based on a search term. The UI flickers and sometimes shows stale results. Walk me through how you would debug this and what role derived state might be playing.
- 2Explain why moving a calculation from useEffect into useMemo could improve performance in a component that renders a large table.
- 3A teammate added a piece of state to cache the result of a prop‑based calculation, but now the UI doesn't update when the prop changes. Why is that happening and how would you fix it?
5-8 years experience
- 1Design a reusable hook that computes a derived value from multiple inputs while minimizing recomputation. What considerations do you make for memoization and dependency arrays?
- 2In a dashboard with many widgets, each widget derives its display data from a global store. How would you structure the components to avoid unnecessary re‑renders caused by derived state?
- 3When refactoring a class component that uses getDerivedStateFromProps to a functional component, what patterns would you use to handle derived state safely?
8+ years experience
- 1Our organization is moving from a codebase that heavily stores derived data in Redux to a more hook‑centric approach. What guidelines would you establish to prevent derived state bugs across teams?
- 2We need to audit a large legacy application for performance issues caused by redundant derived state. How would you prioritize what to refactor and what metrics would you collect?
- 3Describe a strategy for introducing a lint rule or TypeScript utility that warns developers when they store derived data in state.
Follow-up Questions
- Can you give an example where storing derived state caused a bug?
- How do you decide whether to memoize a derived value with useMemo?
- What are the trade‑offs of using useEffect to keep derived state in sync?