React Hooks Tutorial – 8 – Conditionally run effects
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703820441_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: React Hooks Tutorial – 8 – Conditionally run effects
In the last video we had a look at our first example of using the effect hook and we learned one important point the use effect hook is called after every single render in some cases applying the effect after every render might create a performance problem so we need a way to
Conditionally run an effect from a functional component let’s take a look at an example to understand how to do that again for the benefit of the viewers with a knowledge of class components I will first quickly walk through the class component implementation and then we can proceed with the effect hook in functional
Components for this example we will continue with the code from the previous video so we have a class component with a state variable count initialized to 0 in the render function we have a button and on click of that button we increment the count value by 1 when the value
Increments the state changes which causes the component to re-render and component did update will execute setting the document title to the updated counter value pretty straightforward now I’m going to add a text input to this class component which will accept a name from the user so start off by
Creating a state variable called name initialized to an empty string next in the JSX add an input element whose value is going to be equal to this dot state dot name and we need to capture the input element value so let’s add an unchanged Handler so on change
Event this dot said state name is going to be event dot target dot value we basically update the state variable when the text changes finally in component did update I’m going to add a log statement AB dating document title now let’s save the file include it in AB dot
J’s and head back to the browser I will also open the browser console if I click on the button you can see that we have a lock statement and the document title updates but if I start typing in the name we still get the log statement updating document title the
Count value however is still 1 so we are basically setting the document title to the same string seven times which is sort of unnecessary to optimize this we can compare the count value before and after the update and if at all the count value changed we then conditionally update the title
To achieve that we include the parameters for component did update previous props and previous state within the body we check if previous state count is different from current state count and only then update the document title you so a simple if condition now if we go
Back to the browser click on the button the title is updated and you can see the log statement start typing in a name the document title is not updated so we are conditionally updating the title only when the appropriate variable changes that is only when the count
Value changes well now that we know what has to be implemented let’s see how to implement the same with functional components and the use effect hook I’m going to go back to hook counter one Jes and begin by creating a new state variable for the name input element
Const main comma set name is equal to you state and district next we add the input element input type is equal to text value is equal to name and on change they’re going to call set name passing in e dot target dot value finally with the noose effect I’m going
To add a lot statement he is effect updating document title let’s save this file go back to AB dot J’s comment out class counter 1 and uncomment hook counter 1 if you now go back to the browser I click on the button and you can see that this effect is called to
Update the title and when I enter my meme we still are updating the document title and this is not optimal there is no necessity to update the title if it is not even changing between renders so the question is how do we tell react to conditionally run use effect only when
The count value changes in class components we added a check to compare the previous state with the current state and only update if there is a difference if this pattern is so common that the react team decided to build this into use effect for conditionally executing an effect we pass in a second
Parameter this parameter is an array within this array we need to specify either props or state that we need to watch for only if those props and States specified in this array were to change the effect would be executed for our example we need the effect to be
Executed only when the count value changes so within the array we include count if you now save this file and go back to the browser click on the button and the effect is run start typing in a name and you can see that the effect is not run
Anymore after each render so this is the point to take away from this second example in order to conditionally run an effect specify the second parameter to use effect the second parameter is the array of values that the effect depends on if the values don’t change between
Renders the effect is simply not run so a good optimization technique to keep in mind all right we are two examples down but we have a few more to go let’s take a look at the third example in the next video thank you guys for watching no fear 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
Everything about this EP08
To run conditionally useEffect , we need 2nd parameter i.e array
useEffect(()=>{}.[count])
here if the count value is not changed then useEffect does not render.
That's it.
Easy na…?
why did eventListener skipped the useEffect empty array condition and keep rerender?
Can you plz talk normally content and teaching is superb but the voice is bit irritating ….
What is there is some update1 which is involved with statevariable1 and update2 with statevariable2, now the array would contain both statevariable1 and statevariable2 and entire function would run but its possible the re render was caused because of change in one of the state variables, is there any way to optimise on that
Why my useEffect console two times before even updating state?
just wow!
The way of explanation … so grt and insightful!!, thank you so much sir.
Very well explain…
Thanks
Thank you!
It was worth learning how to code. Keep going!
I basically click every ads on each video just to show my love for you
useEffect – 2nd parameter – arrays of variable the effect depends on.
1st parameter – arrow function on what to be done.
to conditionally run effect on a certain state variable:
in class: if condition
in func hook: 2nd parameter
This was best explanation by comparing class and functional components.
you are excellent prof
what if we pass two state values to look for updation……..will useEffect be called when both of those values changes or it will be called even when just one of them changes?
thanks for those videos.
line 9 not workin perfectly document.title = 'You clicked ${count} times'
Just had one question, after implementing the log statement inside the useEffect(), why is it no getting logged with the initial render of the page? In your case its only getting logged when you click on the button. But for the first time the page loads, the useEffect function should be executed right?
First I'm liking the video and watching because I know it's going be fantastic 😃
I can't imagine that this topic can be explained so simple, Fantastic
if you are not a professor, consider that invitation! You're doing this great. Thanks :))
OSSUM Video
Hello what if I want just small block to apply the condition for but not for the whole useEffect block?
Here you go with functional component:
4:17
Thanks
Thank U very Much Sir………………….
very very useful,cant thank you enough for this
Hello when you call a count property from prevState, how does it know to access from state object?
x1.25 👌
Thank you..Vishwas for such a great tutorial.
Thank you so much for these tutorials. Really the best I've come across on the internet.
Thank you for this video! 🙂
Why didn't the console log the 'useEffect…' at the time of mounting the component at around 5:20 ? As the componentDidMount shd also trigger the useEffect and we shd have one more console log statement…
Which is that extension that changed "not equal" to symbol?
can someone explain we have to use target to access the state ?
0:15 the problem when run effect after every render: useEffect hook is called after every single render
1:00 use effect with class (old react version)
7:15 code
great!
He's the best, you guys!!!!!
Sir could you please create videos on How to route between different components in React.
Easiest way of learning. Hat's off.. Do more videos.. Thanks..
God bless you man! Truly deserve more subscribers!
great explanation, thanks
Best React tutorial on the internet !!! Hats OFF
I have completed beginners tutorial, now am in 8th video on Hooks,
Thanks ,Awesome Tutorial