React 2021 Hooks and useEffect - Episode 7

welcome to episode 7 of the learning react in 2021 series in this one we're going to talk about another hook so our second hook in the series the effect hook now this one has to do with side effects so what are side effects a pure function in javascript is anything that is deterministic if you give it the same input you'll get the same output and it also means that it doesn't affect things that are outside of its scope so you wouldn't set a timer or do a fetch call inside of a pure function that's what we're aiming to do with react we have our component which is a function we can start with state set that up we can deal with our props and we want to do the rendering and that's going to happen with the same props we're going to end up with the same rendered content every time after the render happens that's when we can do things like use effect where we can set a timer to run we can do a fetch call we can update the state all these kinds of things local storage geolocation index db anything that is sort of out of that initial flow of the render this is what use effect is for is for letting these things happen after the render and then we can also also hook into state and say you know what when this thing well i want to watch this piece of state and when it updates that's also going to be a trigger to re-render stuff so that's going to be a trigger for me to run this function all right so we've got the github repo we're on branch 7 here so if we jump down to branch 7 this is the one that's going to have the finished code for this exercise i've got our site up and running the same thing that we had from before actually i disconnected it so i'll restart this in the code so while this is up and starting in the code i did add a little bit of css so i've updated app.css i've updated header.css and the searchbar.css basically i just shifted the header up to the top got rid of that gap i put a little bit of a shadow on the top and i created some css for this area right here inside of app.js i put a main element wrapped around this and added a little bit of css to that nothing critical nothing that's going to affect what we're going to do it's just purely visual stuff that i did inside app.js i added the main element with this class name and that css is inside of app.css i just wrapped it around the search history element that we already had so that component was already there i just added the main okay so use effect if i want to use this hook just like use state and any of the other hooks i have to import it so we can say use effect now that's brought in so we have that function available to us we can inside of here say use effect use effect is going to take a function and there'll be a second parameter if this is empty you're saying there's nothing that i really want to watch there's nothing that i need to pay attention to and make this function run again if things inside of this watch array get updated so with this inside of here if i were to just add a console.log [Music] this is the initial render [Music] alright so i save that all we've done is import this and i've added this function use effect back over here there it is initial render complete when app.js when the app component is finished rendering that's when this function runs every time i refresh the page i will get that message the initial render is complete okay so i know it runs on initial render what else do i want to do here well i'm going to make a call to the star wars api i've got the link here i'll post this link down in the description for you i'm going to use the star wars api and i'm just going to retrieve a list of the films so i'm going to use this url we're going to make that happen when we first load and then i'm going to take the result of that and i'm going to put it into a state variable so i'm going to use use state for the films right here same as what we did with our use state for the history the terms we're going to say films and set films so films is going to be our array of all the data that comes back from the fetch call films is the method that we call if we want to replace or update that and we need to update it because our initial value for this is going to be an empty array at the start there are no films we have not made a fetch call yet and i can't make a fetch call until after the initial render so down inside of here i've got search history i'm going to create a component that is going to take those initial films and render them as a list similar to what the search history did [Music] so i'm going to put search results we'll call this and films equals films just keep the variable names all the same so we'll create this component we need to create a folder we need to create the javascript and the css file so we'll start off with that inside of component [Music] search results inside of that we'll have our search results.js and we'll have our search results dot css nothing inside of search results css yet inside of here we'll import the css file and do our export default function search results we'll accept props props is going to give us that films we're going to build a ul and inside of that we're going to loop through whatever is passed through films so right here films this prop that's going to be an array that we passed down into here the initial value like we said up here is an empty array so we're going to be passing an empty array to here and we may as well put the import here for the component [Music] there we are so we've got search results and over here in search results we're going to build our list and we're building list items inside we're going to have film dot now i know the data here i actually have over here i'll just copy and paste it in this is the data that we would get back so one of the film objects there's characters created director edited episode id i'm going to use episode id as my key and i'm going to get title right here that's what i'm going to put in as the text inside the list item so film.title and then my key is going to be film dot episode id all right so we have our search results which is going to come up as an empty array so there's not going to be anything inside of there but we will have this and i'm going to add inside of here just so i can target it and i'll call it results here we are in the search results we'll set it this up now this is going to be one of our flex elements this was the the new css that i created inside of app.css there was the content section this was the new bit that i created and it's display flex so we've got our search history and the search results uh we'll make them each sort of a third of the the page for now anyway so i'm going to set flex basis at 33 just enough to get us going all right so we have the class name on the ul we've got this being rendered back up to app where we were loading this we have not called set films anywhere use state gives films an empty array usefact is going to write this out and we're passing films into there so if we take a look over here in the browser let's refresh this get rid of all that we're not calling set films we expected to see that there's nothing being rendered here there is no search results because we haven't made the fetch call yet so that's what we're going to do that's the purpose behind our functions here the use effect so we have use effect and i'm going to create a new function here i'm going to make it an asynchronous function [Music] and i want to fetch data what kind of data do i want to get i want to get films so i'm going to call this from inside of here we will say fetch data films that's going to call this function if we look at the api here we'll see swappy.dev dot slash api films this is going to be the url that we want so i'm going to copy that and we're going to append the type on the end of that inside of here we'll say let url equal this and we'll insert type right on the end so that's the url that we want to fetch this is asynchronous we're going to be doing this from use effect use effect runs after the render is complete so we're not going to be in in in a race condition with the rendering and then getting into problems where it's trying to do two things at the same time and they start conflicting we want to do this after the initial render when this is complete that's when we will call set films and we're going to provide the new data here so we're going to call this just a moment we want to do a fetch of our url and because this is asynchronous i can break this up into steps we can say let response equals await that when we've got it back we can check if not response.ok i will throw an error and we'll take our response dot status text [Music] standard stuff for the fetch then i'm going to get the data the data that i want to pass over to said films we need to await because we're going to call the response.json method and then here this is where i want to pass in the data but it's not the entire object it is the results array if we look in the star wars api we'll see that there is the entire object that we get back from json but results is the array with the array of films so here set films is going to replace whatever was there before with a brand new array now having done that means that we have updated films when films gets updated that will trigger a re-render which means right here we're using it search results is going to get re-rendered so we should see there they are here are the films so the initial render complete let's refresh and start over again so the initial render was complete and then we're not seeing the initial render message again even though we did get a re-render this was only for the initial render to see what i mean about the initial versus re-rendering i'm going to jump down into this component here the search results component if we go inside of here i can use use effect in here as well so we need to import it [Music] there we are we've got use effect we can use it and i'm going to add it here i'm going to give you an example of using it where you are actually tracking something i'm going to put it in here twice you can actually use the use effect method as many times as you want so remember there's a function and then the array if the array is empty this only runs for the initial render if you put something inside of here for example instead of props i'm passing in a thing called films that's what we're looping through right here i'm saying anytime there's a change to this that's when i want to run this method so here [Music] for this component it's the initial render of the component only and for this one [Music] [Music] okay so we've got one for initial one for initial and re-render this one we should see once this one we'll see for the initial render as well as when the films actually got loaded when props dot films changed from an empty array into a full-fledged array and there we are there's the initial render for app.js here's the initial render only for films and here's the initial and the re-render of films so it happened twice there we go initial render of films initial render of app.js initial and re-render of films initial and re-render of films so this one right here happened when the array was an empty array this one happened after we updated and we actually provided an array of film titles that could be rendered like this [Music] so use effect and use state these are the two most common hooks these are the ones that you're going to see again and again throughout your development of your react application you're going to use them all the time these are really what give us access to state and the component life cycle use effect is the component life cycle so it used to be that you would have a render method instead of just the return to be a render method that's part of the life cycle and then there's the component did mount component did update so did mount is right after the initial load that's like what we're doing here and then component did update is tracking something there was a change and we re-render the component we're doing it here the difference with these ones is that with use effect i can specifically target which properties that i want to use as triggers for my running of the function it's not just oh yeah the thing re-rendered it's no this property changed to cause a re-render so under different circumstances we can look at different properties and say that's the reason that i'm currently re-rendering this thing and then we can do logic that is specific to that back here in the app we're looking at having a function that will do a fetch now right now we've got it we're using films we've kind of got it a little bit flexible but we're going to in the future start working with some of the other hooks and we're going to look at some of the routing that we can do by clicking on the links and we're going to use that data to decide which fetch call we're going to make and which data we're going to bring back and then we're going to be updating the data and passing information down to search results to say no no it's not just films it could be people it could be films it could be planets or vehicles or whatever it is and then do things appropriate to whatever it is that we're getting back all right so that is use effect and combining that with use state you've got a lot of power at your fingertips now so i hope this all makes sense have a go play around with it just be careful that use effect is being used inside of your function it's not something that you can take like you state we can't take those things and put them outside the function use them and expect things to happen properly don't try and make use effect into an asynchronous function that's not allowed i could put another function inside of here that was asynchronous like this one i could place this inside of here however if you are inside of use effect calling this you can get into a loop situation where it is calling itself again and again and again because it's updating the data and that's going to be a trigger for the calling the fetch again and you can get into a loop situation so just be careful about that all right so any questions about use effect feel free to leave those in the comments down below i'll answer as many as i have time for and as always thanks for watching

Channel: Steve Griffith - Prof3ssorSt3v3

Views: 1,299

Keywords: MAD9022, web development, JavaScript, JS, CSS, HTML, steve flix, steveflix, web dev, professor Steve, prof3ssorSt3v3, 100daysofcode, MAD9135, react, reactjs, react 17, react 18, react version 17, react v17, react hooks, react tutorial, intro to react, learning react, build a react project, real world react, useEffect, side effects, pure functions

Id: vSDzqFq_voE

Length: 19min 11sec (1151 seconds)

Published: Wed Oct 06 2021