React Hooks Tutorial – 9 – Run effects only once
- December 31, 2023
- Posted by: MainInstructor
- Category: React
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1704037467_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: React Hooks Tutorial – 9 – Run effects only once
In the last example we saw how to conditionally run effects in this video let’s see how to run an effect only once or for this appear with the knowledge of class components how to mimic component did mount with use effect and functional components first let’s quickly take a
Look at an example that makes use of class components so in the class component we have a constructor we have variables to store the X and y coordinate position of the mouse pointer in component did mount we add an event listener we listen to the mouse move
Event and log the mouse position in the state variables we then rendered that position in the UI if you take a look at the browser I move the mouse around and you can see the coordinates changing so what I want you guys to make note of here is that we
Set up the event listener only once and that is in component did mount now let’s implement the same with use effect and functional components I’m going to create a new file called hook mouse dot J s within the file I’m going to use the stupid RFC II to create a functional
Component I’m also going to import you state and use effect from react next I’m going to create two state variables for X&Y initialized to 0 in the JSX I will render these state variables helps the x coordinate and the y coordinate now we need to add an event
Listener for the mouse event and this is where we use the effect hook the use effect accepts a function as an argument within the function let’s first add a lot statement console dot log use effect called and then we add the event listener window dot add event listener
We listen to the mouse move event and the event handler is log Mouse position let’s define log Mouse position it is going to accept event as its argument and within the body let’s log Mouse event and then we are going to set the x coordinate y dot client x and the y coordinate
E dot client why back in ab dodgers that’s include hook mouse and comment out plus mouse if you now save the file and take a look at the browser in the console you can see that we have use effect called from the initial render and now when i move the mouse around you
Can see that the effect is called every time the component re-renders this is not surprising though as it is exactly what we learned in the previous videos the effect is called after every render unless you specify the dependency array for our example we don’t really want the
Effect to depend on anything we want it to be called once on initial render only and the way we achieve that is by simply specifying an empty array as the second parameter to use effect we are basically telling react hey this particular effect does not depend on any
Props or state so there is just no reason for you to call this effect on rear Enders and react replies so you want me to call this effect only on initial render and forget about it I can do that and sure enough we have mimicked component did mount if you now
Save the file and head back to the browser you can see that we have use effect called on initial render and when I move the mouse around we only have the mouse event logs this effect is not called on subsequent renders so the point to keep in mind from this example
Is that we can mimic component dig mount with use effect hook by simply passing in an empty array as the second parameter to use effect now I know we could have probably talked about this in 30 seconds but as always I want you to understand why we are writing the code
That we write alright thank you guys for watching don’t really subscribe and let’s take a look at another example in the next video
-
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
can there be multiple useEffect() in a single functional component?
excellent
Hi, I have an issue. If useEffect is not running everytime then how console of logMousePosition is printing. Because, we are calling logMousePosition in useEffect only. That will be called only once when component is rendered.
Thanks!
why setX and setY shows error
why client is used
Done thanks
Passing an empty array to useEffect as dependencies causes useEffect function to be triggered only once, this is the replacement for componentDidMount in classes
Does console.log twice when started (first mount). Any ideas why?
LogMousePosition IS NOT WORKING WHY?
window.addEventListener() this func is not called why?
After watching so many of your video I d like to first of all thank you for this great content , and ask you how come your keyboard is so silent.. so intriguing
the useEffect is calling two times .. as i my console there is 2 times useEffect called is printed , how to resolve this ?
I'm new to React. Learning it.
In the example, the "logMousePosition" is invoked from within the useEffect. When the 2nd parameter is empty, we are essentially telling React to not run the useEffect code after the initial render.
Now when useEffect is not called how then is the "logMousePosition" being called?
I'm confused, some one help me out please
Excellent work, best explanations yet. Question: Would you typically need a return clean up function here inside the useEffect?
😆
You are the best, thank you sir
4:34 if i give an empty array as second para in uesEffect that mean it will render on once or page reset , right? then why the windows.addeventlistner is running subsequently though it is also inside the useEffect function, it should have rendered only once?
Many of you have doubt that if we pass empty array then eventListener will we also be called only once, in fact this is true because eventListener in JS is called only once and it continue to listen until it is specifically removed. It is not like other event handlers like onClick or onChange.
you have excellent way in teaching,, we need to explane some of projects for practic if you have a time thanks
I am still confused after adding array parameter the eventlistener is called each time but why not the console log being inside the same parent ?
in vishwas, we vishwas
if we pass an empty array and the useEffect( ) runs only once as we saw in the video then why does window.addEventListener() runs on every mouse movement, shouldnt it also just run once like the log statement?
"Now i know we could have probably talked about this in 30 seconds,but as always,i want you to understand why we are writing the code we write" Reason why code evolution is OP. 😍🥰
How logMousePosition function will get executed if useEffect itself is not being executed after first render ?
Vishvas we don't want to learn it in 30 sec, as by your method (and in not more than 6 minutes ) we will be able to understand the need better and will remember it for a long time
As you can understand it by Seeing my learning pattern, I've learned class component first (obviously by your videos, no need to ask) just to appreciate the beauty of Hooks even in 2021 (nearly 2022)…!!
so just keep up the good work bro….we are with you.
Not so great, please shorten the videos 😂😅
Super
I'm your fan. thanks
great explanation love the way u explained the topic
I mean inside the useEffect what if I want part of code to be fired only in componentDidMount lifecycle and the other in componentDidUpdate while I have only 1 parameter to decide the behavior for the all block of code.
I'll make sure to paypal you something once I see myself to be confident at React. Your contribution must not go unrewarded.
using [] as array dependency stop useEffect from running on every updatae,or using another regular js function in this useEffect it will run once when using [] as array dependency but why event is triggered that is also defined in useEffect ,means it doestnot effect the event ?
@Codevolution If the useEffect is not called everytime, then how is the function logMousePosition called because the function call is written inside the useEffect.
05:07 haha reading this title after completing the last video I already know how to achieve it, logically haha
What is e clientX ??