Fetching Data from an API with React Hooks useEffect

Sharing buttons:

so we're gonna be exploring how to make

an API request in a component that is

just a function and we're gonna be using

the new react hooks specifically the use

Effect 1 now first I kind of want to

show you guys how this works and I have

the example from the docs right here so

I currently have a state of a counter

and every time you click the counter we

increment it and then we have this use

effect here and what happens is the

default behavior is we have a function

that we pass to it and this function

gets called every time the component has

finished rendering so after the

component fish is rendering or updating

the title on the number of times we have

counted so what this looks like in

action is you'll watch the title up here

is 0 and this is 0 if you watch them

when I click the button this is going to

increment them that's gonna increment


so it happens right after so after it

finishes rendering the effect gets

called and this gets updated and this

can happen as many times as I click it

and you can see it's just kind of one

behind so what we can do to make an API

request with this is after we render

this we call the API request but we

don't really want this to render every

single time that the component is

rendered we only want to have at one

time maybe so for that there's this

second parameter that we can pass in and

this controls how or when this use

effect is called so we can pass in a

array here and then if we just do an

empty array what will happen is it will

only be rendered after the first time

the component has rendered so basically

it's similar to component did mount so

we can take a look at this if I

increment this we're gonna notice it

stays at zero and it never never

increases right so the first time this

component mounts the state is 0 so it

sets the title to you click two zero

times and then after that it never

updates we can also pass in here values

so for example account so now what will

happen is use effect will be called

every time count is incremented or count

changes so we can click on this and we

can see it now works

because it's now only going to change

when the account changes well it only

gets called whenever account increments

so this is helpful we can just do this

empty bracket - no make an API call

because now this is going to act like a

pointed mount and that's usually where

you could put an API call so here what I

can say is I can say conscious response

and we can make this an asynchronous

function and I'm gonna fetch some data

now I'm just gonna use the random user

API here and so I'm going to grab this

URL and we'll fetch that and we'll get

some data back and we're going to say

response dot JSON and let's call this

data and then what you can see here it's

going to be results and then there's

gonna be an array and then we have our

item here so we can say Const item is

equal to data dot results and we're

getting the first item and we can just

de structure that if you want to okay so

now this ID on what I'd like to do is I

can update the state and pass it to that

so I can say Const person and set person

use state and at first the person is

just going to be null and then after

this is finished loading we're going to

say set person and we're going to set

the person to this item that we get back

and then down here we can render that

some miss a div and I'm just going to

say person and so we're only gonna

render this div when we have a person

and then I'm gonna save person dot and

we can just get the name and we'll get

the first name so we'll save that and

now we can come look at our component

and we can see the name and you'll

notice every time we click this it's not

going to refetch or new users the name

stays the chain stays the same now again

if I were to get rid of this we could

and now every time I click this button

you notice it does that and I think we

have an infinite loop so let's turn that


there we go so looks like what I just

did was so this gets called every time

that the component fish finishes

rendering and then we basically tell it

to re-render so it was just an infinite

loop there we tell it to render again

when it's finished rendering it calls

this and just loops and loops and loops

so we probably don't to do that but this

works and now the next thing we can do

is we can kind of make this generic and

we can also make this before make it

generic we can make this into a loading

as well.if going to add like a loading

indicator or something so for example I

can add loading here and we can say set

loading and we can say loading is true

by default and then we're gonna say

after we get the person we can say set

loading is false and I believe these

will be batched together into one update

but I'm not quite sure but I believe how

that works is both of these it will say

set person set loading and it does it

asynchronously so they're gonna be

batched and the update should happen in

one render and then now with this

loading we can use that as an indicator

here so if we're loading we're gonna

render a dot dot dot loading otherwise

we can render our person and now if i

refresh the page you can see the loading

pops up there for a second so now if I

want to I could make kind of a generic

fetch component or fetch hook I want to

so I could say use fetch and you could

kind of put your own custom logic in

here but in this case I'm basically just

gonna copy what we did right here and

now instead of person I'm gonna pass and

data I'm going to say set data and we'll

just make it real generic so we're gonna

say set data and at the bottom of this

we're just going to return data comma

loading and then maybe we pass in the

URL here as a parameter so now we can

get rid of this you could say oops URL

and now I can say

Const use fetch will pass in that and

now I can get the data

Andy loading and we can push pass in our

data there so now I can put in any URL

to an API I can display a loading

indicator while that's loading and then

when I get the data back I'll get it and

put it there and we can see this it

works exactly the same but now it's

generic and we could pass any URL in

there and I think this has a lot of

potential and you can kind of create

your own kind of fetch that makes sense

for the API and the project that you're

working on so this looks pretty cool and

that's it for this video guys thanks for