Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
UseEffect Hook
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:00Â useEffect is like a special tool in React that lets you do things outside of just displaying stuff on the screen, like fetching data from a server or doing
00:00:10Â some cleanup after the component is removed from the screen.
00:00:13Â Let's say you want to log a message every time a user likes a movie.
00:00:17Â To track that, we can use the useEffect.
00:00:20Â So let's modify the card component to implement it.
00:00:23Â Right here, below declaring the use state, I'll say useEffect.
00:00:29Â Something like this.
00:00:30Â And then I'll import it right here from React, right next to useState.
00:00:35Â useEffect has the following syntax.
00:00:37Â You first declare a callback function called the effect.
00:00:42Â And then within it, you put the code that you want to have executed.
00:00:46Â Something like title movie has been liked.
00:00:50Â or has been liked or disliked.
00:00:53Â So if I save this and open up the console in the browser, you'll see that we have quite a few console logs.
00:01:00Â Two for each one of these movies.
00:01:03Â Why do we have so many?
00:01:04Â Well, it's because this card component got mounted three times.
00:01:09Â Once for each one of these movies.
00:01:11Â But wait, something is not right here.
00:01:14Â Instead of 3 calls, here we can see 6 different console logs, which means that this use effect has been called 6 times even though we only have 3 cards.
00:01:24Â Why the duplication?
00:01:25Â Have we done something wrong?
00:01:27Â Well, not really.
00:01:28Â If you check out the React.js documentation, you'll see a question that says my effect runs twice when the component mounts.
00:01:35Â And that's normal, because we're in the development mode.
00:01:38Â When strict mode is turned on and in development, React runs setup and cleanup one extra time before the actual setup.
00:01:47Â This is a stress test that verifies your effect logic has been implemented correctly.
00:01:51Â This is not a problem because once you deploy your app to production, it'll only run three times.
00:01:56Â But if you want to learn more properly how React really works in production, you can head over to main.jsx and then remove this strict mode wrapper.
00:02:06Â This will make sure that there's no duplication.
00:02:08Â So right now, you can see that there's three console logs, one for each one of these cards getting mounted to the UI.
00:02:15Â But now, let's say you want to track the activity of the user for some kind of an algorithm that we might want to develop within our movie app.
00:02:22Â You want to track the number of clicks to each one of these cards to be able to recommend similar movies.
00:02:28Â To do that, we'll need to create a new state.
00:02:31Â So, simply say use state, and this time I won't simply start typing it.
00:02:36Â Rather, I'll press enter to select this template.
00:02:40Â allowing you to just type your word, like count in this case, press tab, which will automatically write setCount to provide the setter for that count variable,
00:02:50Â and then tab one more time to define the initial state of zero.
00:02:54Â Since in your React applications it is normal to have multiple states per each component, using this quick start is always helpful.
00:03:01Â Now that we have this state, let's create an onClick handler on this card, So whenever we click on the card, we want to set count to be increased by one.
00:03:11Â So we can say take the current count and increase it by one.
00:03:14Â Now there's one quick thing I want to point your attention to.
00:03:17Â And that is that in more complex interfaces, it is never recommended to update the value of the state by using the state itself.
00:03:25Â Rather, what you'll often see being done is you create another callback function without the setter state call, And then you get access to the previous
00:03:35Â version of that state.
00:03:36Â And then you can do whatever you want with it, such as do prep state plus one.
00:03:41Â In a similar way here, you can get access to the previous has liked and then toggle it on or off.
00:03:48Â But for simplicity's sake, I'll keep it right now, just count plus one.
00:03:52Â Now, let's display that state somewhere.
00:03:54Â We can display it right here next to the title.
00:03:57Â So let's say title, and then maybe show the count.
00:04:00Â If you do that, you'll see Star Wars zero, Avatar zero, and so on.
00:04:05Â Maybe we can add a break tag right here to display it in a new line.
00:04:09Â There we go.
00:04:10Â That's a bit better.
00:04:11Â And now, if I reload, first of all, you can only see three different renders.
00:04:15Â But now, check this out.
00:04:17Â If you click on a movie, the number will increase.
00:04:20Â That's good.
00:04:21Â But if you keep clicking on it, even though we're not changing the light state, this use effect will keep firing.
00:04:28Â You can see that by this number right here.
00:04:30Â So every time I click something, we're firing a new use effect.
00:04:34Â even though we're not changing the light state.
00:04:36Â That's not good.
00:04:37Â That's not the behavior we want.
00:04:39Â So let me show you how we can run the use effect only when something changes.
00:04:43Â To do that, you can use something known as a dependency array, which you pass as a second parameter, also often called depths.
00:04:52Â Whatever variable you pass here, React will try to recalculate and then see if it has changed.
00:05:00Â And only if it has changed, this effect will be called.
00:05:04Â So if you do this and reload, now if you continue clicking on it, you'll see that our card will actually update.
00:05:11Â The count state will change, but this use effect won't run.
00:05:15Â But as soon as you like or unlike a movie, it will immediately change its state.
00:05:20Â Pretty cool, right?
00:05:21Â And can we have multiple use effects in the same way that we can have multiple use states?
00:05:26Â Well, surely.
00:05:27Â And let me show you another most common use case of a use effect.
00:05:32Â You can just create it like this, provide a callback function, and then provide an empty dependency array.
00:05:39Â This is in my opinion, the most common use case of a use effect.
00:05:44Â This is a use effect that runs only once on the mounting of that component.
00:05:49Â Only when that component first appears.
00:05:51Â So let's add a quick console log and say card rendered.
00:05:57Â If you do that, you'll see three card renders.
00:05:59Â This is how UseEffect manages the side effects based on the dependencies that you provide.
00:06:04Â Now we can remove that.
00:06:06Â And instead of that, I want to teach you something else, something called conditional rendering.
00:06:10Â Technically, we already learned a bit about conditional rendering when we use this ternary operator right here.
00:06:16Â Conditional rendering allows you to show different kinds of UI on the screen depending on different criteria.
00:06:22Â For example, if you only want to render the count if it's not equal to zero, then you could say something like if count exists,
00:06:29Â then render the count, else render a null.
00:06:33Â Or in this case, you could just say count or null.
00:06:36Â So now we can see that it gets hidden, but as soon as you increase it to one, it's shown.
00:06:41Â We just implemented conditional rendering.
00:06:43Â Another way where you conditionally rendered something were those two different cards.
00:06:47Â You can see now we see one and now you see the other.
00:06:50Â Of course, this has been just the simplest example of conditional rendering.
00:06:54Â Throughout almost every single more advanced application that we build on this channel and on JS Mastery Pro, you can see different cases in which we use
00:07:03Â conditional rendering.
00:07:04Â You'll also use it very soon when building your movie app.
00:07:07Â So, with that in mind, let's delete everything that we have right here in our app, and then we'll have to create it once again from scratch.
00:07:14Â But isn't that going to take a lot of time to recreate this function for every new component?
00:07:19Â Well, thankfully there's an extension that helps with that.