React Hooks Tutorial - 7 - useEffect after render

in the previous video we have an introduction to the effect hook we learned that it is used for causing side effects in functional components I also mentioned that use effect is capable of handling what component did mount component did update and component will unmount lifecycle methods for capable of doing in class components so in this video let's take a look at an example to see how to use the effect hook as a feature that can mimic component dead bound and component did update but in functional components again for the benefit of the viewers who are familiar with class components that is first quickly take a look at what the code looks like in a class component I have already created the component called class counter one let us take a look at the code you can see that we have a class component in the constructor we initialize the count value to zero in component did mount we use the initial value of count and set the document title to the count value next in the render method we have a button and on click of that button we increment the count value by one the component will update and this time in component did update we set the document title again to the updated count value pretty simple a component that updates the document title with the counter value I have included the component in Abdo chess and if I take a look at the browser you can see that initially the document title is clicked zero times and when I click on the button the current value increments by one and updates the title as well now let's try to replace this functionality with a functional component or to be more precise replace component did mount and component did update with the effect I'm going to create a new file and name it hook counter one dot J s now the first step is to create a simple counter let's forget about the side-effects for a minute lucky for us we have already seen in the previous videos how to implement a counter using the state hook let's quickly add the code I'm going to use the snippet RFC e to create a functional component next we import you state to implement the counter in the function body create a state variable and the corresponding set up function so const count comma set count is equal to you state and the initial value of count is 0 next in the JSX add a button with a click handler to increment the count you so the innerhtml displays the count variable and on click handler called set count passing in count plus 1 if you now include this component in app component and go back to the browser we should have a working counter implemented using hooks but this is nothing new what we really want to achieve is to change the document title on button click of this functional component and you might have guessed it already we will be using the effect hook so in hook counter one dot yes we are going to import use effect from react now how do we use this in the code well just like you state use effect is also a function we simply have to call it to this use effect hook we pass in a parameter this parameter is a function which gets executed after every render of the component so let's pass in an arrow function which updates the document title you clicked dollar count times and that is pretty much it I'm going to comment out the class component in Abdo chess and let's test it out in the browser you can see that initially the document title reads you clicked zero times and when I click on the button the count value increments and the document title is updated so the behavior is as expected here causing side effects from a functional component using the effect hook now that we know how to use the effect hook let me explain to you how it all works when we specify use effect we are basically requesting react to execute the function that is passed as an argument every time the component renders and you heard me right use effect runs after every render of the component that might seem a bit weird but conceptually it is what we are trying to do with class components as well on initial render we want to execute some code and on every render after that we want to execute the same code with hooks we have used effect for that exact same purpose it runs both after the first render and after every update we can of course customize that but let's save that discussion for another video for now all I want you to remember is that u s-- effect runs after every render the second detail to make note of is that use effect is placed inside the component by doing this we can easily access the components state and props without having to write any additional code so that is how to use the effect hook to cause side effects in a functional component import use effect from react call it within the component and pass in a function which has to be executed after every render of that component in case we are basically updating the document titled after initial render and every subsequent render all right in the next video let's take a look at another example thank you guys for watching feel free to subscribe I'll see you guys in the next one

Channel: Codevolution

Views: 163,694

Keywords: Codevolution, React, ReactJS, Reactjs, ReactJS Tutorial, React Hooks, React Hooks Tutorial, ReactJS Hooks, React Tutorial for Beginners, ReactJS Tutorial for Beginners, useEffect, useEffect Hook, useEffect Hook in React, useEffect after Render

Id: nAuWOnFMlOw

Length: 7min 23sec (443 seconds)

Published: Mon May 27 2019