Describe getDerivedStateFromProps.

1
Used to update the state using the props
2
getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and subsequent updates.
3
It should return an object to update the state, or null to update nothing.
4
This method exists for rare use cases where the state depends on changes in props over time. For example, it might be handy for implementing a <Transition> component that compares its previous and next children to decide which of them to animate in and out.

Deriving state leads to verbose code and makes your components difficult to think about. Make sure you’re familiar with simpler alternatives:

1
If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.
2
If you want to re-compute some data only when a prop changes, use a memoization helper instead.
3
If you want to “reset” some state when a prop changes, consider either making a component fully controlled or fully uncontrolled with a key instead.
4
This method doesn’t have access to the component instance. If you’d like, you can reuse some code between getDerivedStateFromProps() and the other class methods by extracting pure functions of the component props and state outside the class definition.

1
Note that this method is fired on every render, regardless of the cause. This is in contrast to UNSAFE_componentWillReceiveProps, which only fires when the parent causes a re-render and not as a result of a local setState.

Difficulty: 5/10

Topics: state synchronization, static lifecycle method, props-to-state mapping

0-2 years experience

1
You have a component that receives a selectedItem prop and needs to store its id in state for an input field. How would you use getDerivedStateFromProps to keep the state in sync when the prop changes?
2
If you forget to return a new state object from getDerivedStateFromProps, what will happen to the component's state?

2-5 years experience

1
We added a new feature where the parent passes a filter prop to a list component that also allows the user to edit the filter locally. The component currently uses getDerivedStateFromProps to copy the prop into state. Users report that their edits are being overwritten unexpectedly. Walk me through why this is happening and how you would fix it.
2
During a code review you notice a component using getDerivedStateFromProps to derive state from props, but the component also has a shouldComponentUpdate that returns false for certain prop changes. Explain the interaction and potential bugs.

5-8 years experience

1
Our application renders thousands of rows with a cell component that uses getDerivedStateFromProps to compute derived values. At scale we see performance degradation. How would you refactor the component to avoid unnecessary calls while preserving the same behavior?
2
We are migrating a legacy codebase to React 18 and want to replace getDerivedStateFromProps with hooks. Describe the steps and trade‑offs involved in converting a class component that relies on this method to a functional component.

8+ years experience

1
Across multiple teams, several components use getDerivedStateFromProps to mirror props into state, leading to duplicated logic and bugs. As a technical lead, how would you establish a strategy to phase out this pattern and enforce a more maintainable approach?
2
When designing a shared UI library, would you allow the use of getDerivedStateFromProps in public components? Discuss the long‑term maintenance and compatibility considerations, especially with future React releases.

❓Can you walk me through the order of lifecycle methods when props change?
❓What are the main pitfalls of using getDerivedStateFromProps compared to componentDidUpdate?
❓How would you test a component that relies on this method?