Perform Asynchronous Actions (like fetching http data) in React with useEffect
🚨 The correct url is now "https://swapi.dev/api/people/"
Whenever doing a side effect (like fetching data) in React, we can use the useEffect hook to perform that action and then set state afterwards.
So we'll fetch some data inside of useEffect like this:
useEffect(() => {
console.log(props.id)
fetch("https://swapi.co/api/people/"+props.id)
.then(response => response.json())
.then(result => setData(result))
}, [props.id])
Caution! make sure to set the dependency array (the second argument to useEffect) to contain any data that you use inside of the useEffect. Otherwise you could end up with an infinite loop as the useEffect will run every time the component in re-rendered.
Chris Achard: [0:00] To perform any asynchronous functions or functions with side effects, first we're going to import useEffect from React. We're going to use useEffect to tell React when we have side effects.
[0:11] Let's make a function called GetData. That's going to take some props. We can use GetData down here. Let's pass an id into that prop. We'll start with 1 as an id. From GetData, we're going to return some JSX. Inside of that, we're going to put whatever comes back from an HTTP call that we're going to do.
[0:33] To do that, let's use useEffect. We need to pass useEffect a function. Here's a function that we're going to pass to useEffect. Now we can do any asynchronous or side effect thing that we want. We could call fetch, for example, to get some JSON from the Star Wars API. We're going to get the person that is in our props.id.
[0:59] As soon as we do that, we have to pass a second argument to useEffect, which is an array of dependencies. To that, we will pass our props.id. What this is saying is that any time the props.id changes, it will rerun this useEffect to fetch the new person.
[1:16] Then we can actually do something with this. Let's first take the response and turn it into JSON. From that, we will have some JSON data. Let's set this so that we can display the person's name on the page. To do that, we can't just go and set the person's name, we have to set state, because setting state is how we change the UI.
[1:40] We're going to make a new bit of state called data and setData. By default, we're going to set that to an empty object. Now we can use setData down here to set the data to the result that comes back. Then down in our render method, we can say that the name equals the data if it exists, so data && data.name. This will only render data.name if data exists, and is not NULL or undefined.
[2:10] Let's save this. We get that the name is Luke Skywalker. You can see a delay there, and that's when this fetch was happening. Then we could change our id to 2, for example. If we save, we get the name is C-3PO. useEffect is how we can get data fetches in our app.
[2:28] One word of warning is that be very sure to remember this array for two reasons now. One is that if the props.id changes, then we want to refetch the name. However, there's something else going on here, which is that setData will change data. If we don't set this array here, then it will rerun the useEffect whenever data changes.
[2:50] If we had nothing here, then what would happen is the useEffect would run. It would set the data which would change data, which would rerun through the component, and rerun the useEffect. That would get into an infinite loop.
[3:02] You have to be careful when using useEffect to always set your dependencies correctly.