Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Update State Based on Props using the Lifecycle Hook getDerivedStateFromProps in React16.3

    Nik GrafNik Graf

    getDerivedStateFromProps is lifecycle hook introduced with React 16.3 and intended as a replacement for componentWillReceiveProps. It is invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates.

    reactReact
    ^16.0.0
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 Here, we have an application fetching person1 from the Star Wars API using a fetch JSON component. This component accepts a render prop function. Its parameters are isLoading and data.

    00:10 This way, we can show a loading indicator until the request is finished loading, and the name, once it's done. The fetch JSON component stores isLoading, as well as data in the state. Both are updated once the request is finished.

    00:28 So far so good. Now, we implement a button to change the person to be fetched in our application. When we click the button, nothing happens. This is the case because the component fetch JSON only triggers a request on componentDidMount.

    00:48 To trigger a new request on every URL update, we can leverage getDerivedStateFromProps. It's a static function that receives two parameters. It should return an object to update a state, a now to indicate that the new props do not require any state updates.

    01:06 Our goal is to reset the state once a new URL has been provided. Since we can't access previousProps, we have to stop the URL in state. In getDerivedStateFromProps, we compare the previous URL with the next one. Only if it changed, we reset data to null and loading to true.

    01:27 Last but not least, we need to make sure the new URL is fetched inside componentDidUpdate. Voila. Our component works as expected. When is getDerivedStateFromProps invoked? Right after component is instantiated, as well as when it receives new props.

    01:58 Note that if a parent component causes a component to rerender, this method will be called even if props have not changed. You may want to compare new and previous values if you only want to handle changes.

    02:11 Keep in mind, because getDerivedStateFromProps is a static function, you won't have access to the component instance using this. While it has nothing to do with getDerivedStateFromProps, there's one more buck I want to highlight.

    02:27 Clicking the button while another request is loading can lead to the situation at multiple request and process, and can finish. As you could see, briefly, Luke Skywalker was rendered.

    02:38 Therefore, in fetch an update, it's best to store the URL, and in the setState function, we can check if the URL we fetched is the last one in the current state. This time, Luke Skywalker wasn't rendered.

    Discuss

    Discuss