React Hooks Tutorial – 7 – useEffect after render
Video Title: 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
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Beautifully explained but how does your arrow function looks exactly like an arrow ?
Can anyone clear a doubt, i tried this following code to achieve same thing as the useEffect hook, so in this video example what is the difference and is it right to use this or not
const [count, setCount] = useState(0);
document.title = `Clicked ${count} times`
return (
<div>
<button onClick={() => {
setCount(count + 1)
document.title = `Clicked ${count} times`
}
}> CLick {count}
</button>
</div>
)
Essentially it does the same thing.
question document title won't get automatically update when state value is updated ?? because you used componentDidUpdate to update document title ?
what i learned from this EP07
useEffect is the replacement of
-componentDidMount
-componentDidUpdate
-componentWillUnmount
useEffect runs every render of a component i.e useEffect functions call everytime when component render
entry point for fetching data and update
But we can do that same thing withoud useEffect Hook. Like this with function
const upDateCount = () => {
setCount(count + 1);
document.title = `Clicked ${count} Times`;
};
Awesome tutorial
learnt from you a lot, but I think this example is not correct because the title will still update if you write it outside of the useEffect
Done thanks
By default, useEffect will run after EVERY render (whenever state changes etc) but can be run based on list of dependencies we pass it (next video)
how did you make two tags into selfjoining tag?
classcounter.js file and classCounterOne.js FIle in both increment is done and updated ,but in 1st one without using lifecyclemethods and in other lifecycle methods are used .Can you please explain the difference
If we write document.title='(${count})' outside useeffect's body it is working as same..
useEffect – takes arrow function as parameter
– gets invoked everytime the component renders. ie; after time, te render() is executed.
thanks alot
The explanation is very good. The video is wonderful. But I think that there is something imperfect in the code. I have commented out the useEffect hook and the code still works.
//useEffect(() => {
document.title = `Count changed ${count} times`;
//});
In other words, we do not need useEffect here. Or do we?
Great Explanation, Amazing
Nice lecture 👍
Great video! 🙂
I really liked the simple examples used to demonstrate the topic under discussion. It keeps things simple and better to comprehend.
You teaching skill is phenomenal. You speak less, precise and very balanced…👌👌👌
at 4:42 u said that …useEffect first argument for fucntion is execute for every render components but thats not true without dependency changed …..because this will run only the first tym for component not for every components without dependency
Amazing
This is the BEST series in the whole Youtube on this topic … no doubt !!
For suppose on a card we have a button which will show modal. But I wanted to prevent re-renders using hooks. How it is possible?
really clear and concise!
This is the first time I have understood useEffect
what is memic meaning?
I do not get useEffect. We could use useState here and say document.title = value after useState at line 4.
These so called react Hooks are groundbreaking for me after mastering class component life cycle hooks from the previous videos. LMAO!
i love you vishwas <3
Really like the way you clear and explain the concept.