It doesnât happen often, but sometimes you have to update state from props in React. In this brief walkthrough, I want to show you a use case where you would want to derive state from props and how to do it for the initial props and updated props. Keep in mind that this concept should only be used rarely though, because often there is no need to initialize state from props. You can find this project we are going to build on GitHub .
Occasionally there are use cases where you want to set state from props in a React function component : For example, the following use case shows a scenario where a parent component provides a list of users as props to a child component which renders these users as a list :
Now, instead of having these users directly at our disposal in the state, we are simulating an API request to get these users with a delay from a JavaScript promise. Before the promise resolves in Reactâs useEffect Hook , we have an empty list of users in our initial state:
So far, everything should work as expected without using any kind of derived state from props. Now comes one of the rare use cases where getting initial state from props would be useful. Imagine instead of rendering just the list of users, we would render an HTML input field for each user:
Since we have an input field now, we would want to be able to update its value somehow. For example, imagine rendering this list of users and you would want to be able to update their name. At the moment, we donât have any access in state for this HTML input fieldâs value, because it comes from our data state from above. We would have to allocate dedicated state for it, which just initializes with the value coming from the props:
Now we initialize Reactâs state from props; and whenever someone types something into the input field, this state gets updated to reflect the new value in the component (see controlled component in React ) without caring about new props , if the component re-renders, at all, because the initial state is only initialized once.
The first example has shown you how to set initial state from props. The next example shows you how to update state from props whenever the incoming props are changing. Similar to the previous scenario, donât expect this use case coming up too often in your React application. However, for some use cases itâs good to know about it.
We will continue with the previous application. Imagine that each rendered user from our list renders a button with an inline event handler to update the userâs name property with callback handler somewhere up in our App component:
For the sake of simplicity, we could update the specified item directly in the list â without caring that this data comes actually from a remote data source â with the following event handler in the App component:
However, for the sake of completeness for making the example more realistic, we could also invoke a fake API which returns us the updated list of users with a delay:
Now comes the crucial step for updating state based on props; which we havenât done yet. In the Item component we set only the initial state based on props. We are not updating the state based on props yet. However, somehow the input field needs to know about the new state after updating it somewhere above. The following small change illustrates the problem:
The first time the Item component renders, it appends a ! on the name for the initial state of the input field. However, if you update the name of a user by writing something entirely new in the input field and by clicking the button, the new updated name of this user doesnât get the ! appended to it when the input field re-renders. We can fix this by updating the state from props:
Every time the incoming prop item changes, the side-effect of our Reactâs useEffect Hook runs and updates the derived state for us. We can also remove the little ! helper which has only been there to spot the bug for us:
Thatâs it. The concept of updating a state from props usually happens if you already have setting initial state from props in place. Then whenever this state gets updated due to an external source, here our request to the fake API, we may want to update this initial state from props again.
Now you know about initializing and updating state from props in React. Use this knowledge sparingly, because it only applies for certain cases where you need to deploy state based on props. However, mostly just using common sense props and state in React should suffice and you shouldnât worry too much about this technique.