UseEffect || React Hooks Guide || Next Js || Tutorial

Aug 15, 2023

UseEffect || React Hooks Guide || Next Js || Tutorial

Learn 3 correct ways of using useEffect reactjs hooks. Bonus example of useState in tandem with useEffect with a web development sample example in less than 15 minutes.
Next Js (React) Tutorial #04 - useEffect react hook explained
Hey Logical People, in this Next.js tutorial video, we will take a deep dive into hooks and we will talk about what is a useEffect hook and how to use it in tandem with useState.

NEXTJS: https://nextjs.org/docs/getting-started
NODE JS: https://nodejs.org/en/
VS CODE: https://code.visualstudio.com/

Content

7.28 -> Hello logical people GKV here. Welcome to the 4th video of NEXTJS fundamental

13.28 -> tutorial series. In the last video we learned what are anonymous functions what are hooks and how use

20.96 -> state hook works? Now in this video, we will learn and understand how 'useEffect' hook works and when

29.6 -> to use it? I hope you are excited because I sure am. So without further ado, let's get started.

37.44 -> Alright, so I'm back to my vs code editor this is where we left in the last video.

45.2 -> So what we want to do, we want to understand

48.64 -> what is a 'useEffect' hook. I'm going to delete this so that I have more space and useEffect is a

57.76 -> special kind of hook provided by react it takes two arguments so the first one is a function

67.36 -> and second one is a list of dependencies

72.56 -> As you might remember from our last video that this is an anonymous function.

77.6 -> If you want you can pass a named function as well but this is how it is preferred in the development

85.12 -> community so we gotta keep it this way. So let's see what this means, so what I

92.16 -> basically want is I want to run some like some command I want to run some logic

98.88 -> whenever some whenever some event happens. What that event means that event is defined by this

106.8 -> dependency list for example. If I provide counter here right. So I'm saying whenever my

115.28 -> state variable counter changes please run this command. So I'm gonna say log I'm not

122 -> doing something very fancy we're gonna do all of this fancy stuff in next series, where we

129.84 -> will build a proper project but to understand the concept I think this is good enough. What

136.4 -> we're going to do we're going to say log console I was called because counter has changed right okay.

147.6 -> Let's see this in action, so I'm gonna go back to my chrome window, I'm gonna clear my console. I'm

154.08 -> gonna click on plus button and you see you see it says I was called because counter has changed. I

160.8 -> can click on plus and it will keep doing the same thing. You can click on minus as well and you see

167.2 -> they see that it doesn't matter if it's a plus or minus. Whenever the state of this variable changes

173.76 -> this gets logged in the console. So if I refresh the page notice what happens,

182.24 -> it says that I was called because counter has changed, which means that this 'useEffect'

190.72 -> this 'useEffect' function or hook was called one time when we initialized this counter. So let's

198.96 -> try something else I'm going to say copy I'm going to say paste I'll say counter one counter one okay

206.32 -> and here for the increment I'm gonna say counter one. I'm gonna I'm not gonna say

213.92 -> update counter I'm just gonna say counter one. So if I go here and it should also be counter one

221.76 -> save it now if I go back to my browser I click on plus one you see nothing happens

229.04 -> and you nothing is logged here because the way we have designed our code we are saying this should

234.8 -> only be called when counter is changed. We are we don't care about counter one, if I click on minus

242.56 -> now you see that this function was called and it changed the counter and hence this effect was

248.64 -> called. So that is one way of using 'useEffect' this comes handy when you want to do something

256.48 -> very specifically when state of a variable changes there's another way of using 'useEffect'

266.32 -> and that would be without any dependencies in the list and this will be called

276.48 -> this will be executed only once when the component

286.96 -> component is

290.4 -> mounted right or say initialized

296.64 -> I save it, if I go back, if I refresh the page

301.76 -> you will see, it says this was executed only once when the component was mounted/initialized. Now if

308.56 -> I press on minus button or place button you will see that you will never see this appearing again.

316.16 -> Now this could be super useful for example in cases when you want to fetch

324.8 -> something from a database and display to the user.

333.84 -> Or maybe you just want to check just want to check if

341.92 -> user is logged in? Things like that okay? Now there's another way of using 'useEffect'

351.2 -> and I promise this is the this is the last way or this is the these three are the only ways of doing

357.44 -> this. That you do not provide any dependencies and when you do that this hook will be called

370.32 -> every time

376.8 -> this hook will be called every time this component re-renders

387.68 -> and a component re-renders whenever a state variable changes

399.68 -> variable changes. Now this is important, so note what happens here. If I click on plus

407.68 -> you see that my counter did not change and you know no other log effect happened but

417.2 -> we did get this one. This hook will be called everything every time component re-renders. If

423.04 -> I click on minus this was called because counter was changed and this hook will be called every

429.6 -> time this component re-renders. Which means that it doesn't matter which state variable changes

436.16 -> but whenever a state variable changes 'useEffect' will be called.

441.84 -> Alright I hope this was helpful and I hope now you understand how 'useEffect' works

448.24 -> and in general you need to also conceptualize how 'useEffect' works in tandem with 'useEffect'

456 -> I'm sorry with 'useState'.

459.2 -> Alright Logic Lovers that's all for this video. In the next one we will

463.36 -> learn how to use 'useRef' hook. See you there and before you click

469.36 -> on the next video do not forget to subscribe and like the video. It definitely motivates

474.64 -> me to create more videos for you, also you can use the comment section to let me know

480 -> what other things you would like to learn and I will try to create those two tutorials for you.

Source: https://www.youtube.com/watch?v=zKejp2PnRxE