ReactJS Course [6] - Component Lifecycle | UseEffect Tutorial
Summary
TLDRThis React.js tutorial delves into the component lifecycle and the powerful 'useEffect' hook. The instructor explains the three stages of a component's life: mounting, updating, and unmounting, using a simple project to illustrate these concepts. The 'useEffect' hook is highlighted for its role in controlling actions based on lifecycle stages, with examples demonstrating its use for API calls and state changes. The video also addresses Strict Mode's role in identifying potential issues with useEffect. The tutorial is designed to provide a foundational understanding before delving into more advanced applications in subsequent lessons.
Takeaways
- 📚 The video is the sixth episode of a React.js course, focusing on the component lifecycle and the use of the useEffect hook.
- 🔄 The React component lifecycle is divided into three stages: mounting, updating, and unmounting.
- 📈 Mounting refers to a component appearing on the screen or starting to exist in a project.
- 📉 Unmounting is the opposite of mounting, where a component stops appearing on the screen.
- 🛠 Updating is when a component changes the UI in response to changes in props, state, or other factors.
- 🔑 The useEffect hook is crucial for controlling actions based on the lifecycle stage of a component.
- 🎯 useEffect can be used to perform actions when a component mounts, updates, or unmounts.
- 🚀 useEffect is triggered by default on mount and update, but can be controlled with dependency arrays.
- 🔍 The video demonstrates the use of useEffect with a simple project involving a text component and a button.
- 👀 The use of Strict Mode in React can help identify potential issues by simulating mount and unmount cycles.
- 🔬 The video explains that useEffect may run twice in Strict Mode as a way to check for proper cleanup on unmount.
- 🔑 The video emphasizes the importance of understanding useEffect for efficient and clean React component management.
Q & A
What is the main focus of the sixth episode of the React.js course?
-The main focus of the sixth episode is to teach about the React.js component lifecycle and how to use the 'useEffect' hook to manipulate components based on their lifecycle stages.
What are the three stages of the React component lifecycle mentioned in the video?
-The three stages of the React component lifecycle are the mounting stage, the updating stage, and the unmounting stage.
What does the term 'mounting' refer to in the context of React components?
-'Mounting' refers to the process where a component appears on the screen or starts to exist in the project.
What is the purpose of the 'useEffect' hook in React?
-The 'useEffect' hook is used to control what happens depending on which stage of the component's lifecycle it is in, such as mounting, updating, or unmounting.
How does the 'useEffect' hook work by default?
-By default, the 'useEffect' hook executes the function provided to it when the component mounts.
Outlines
📚 Introduction to React.js Component Lifecycle and useEffect Hook
The video script introduces the sixth episode of a React.js course, focusing on the component lifecycle and the useEffect hook. The instructor aims to explain the conceptual foundation of React components' lifecycle stages: mounting, updating, and unmounting. A simple project is created to demonstrate these stages, using a button to toggle the visibility of a text component, illustrating the lifecycle in action. The script also mentions the availability of the code in the video description and teases the upcoming examples that will clarify these concepts.
🔧 Deep Dive into useEffect Hook and Lifecycle Stages
This paragraph delves into the functionality of the useEffect hook in React, which is pivotal for managing side effects in components. The useEffect hook is described as a way to perform actions based on the lifecycle stage of a component. The video demonstrates how useEffect can be used to run code upon mounting, updating, and unmounting of a component. The script clarifies the default behavior of useEffect, which is to execute the function it encapsulates after every render, and how to control this with dependency arrays. It also explains the importance of cleanup functions in useEffect to handle unmounting efficiently.
🌐 Practical Uses of useEffect Hook for API Calls and Component Interactions
The script discusses practical applications of the useEffect hook, such as making API calls when a component mounts or updates. It explains how to use useEffect to trigger actions in response to state changes, and how to limit these triggers to specific dependencies. The paragraph emphasizes the versatility of useEffect, illustrating how it can be used to manage subscriptions or requests that need to be set up or cleaned up in relation to a component's lifecycle. The video promises further examples in the next episode to solidify understanding.
🛠️ Strict Mode and its Role in Detecting Lifecycle Issues
The final paragraph of the script addresses Strict Mode in React, a tool designed to help developers write better code by highlighting potential issues. The instructor explains that Strict Mode can cause components to mount and unmount twice, which is a test to ensure useEffect is implemented correctly and to avoid memory leaks. The script suggests that Strict Mode should always be used during development, as it prevents anti-patterns and promotes best practices. The video concludes with a note on the upcoming content, which will include exercises and more in-depth examples of useEffect in action.
Mindmap
Keywords
💡React.js
💡Component Lifecycle
💡useEffect Hook
💡Mounting
💡Updating
💡Unmounting
💡State
💡Props
💡Strict Mode
💡Memory Leak
Highlights
Introduction to the sixth episode of the React.js course focusing on the component lifecycle and the use effect hook.
Explanation of the React.js component lifecycle, including the mounting, updating, and unmounting stages.
The importance of understanding the lifecycle stages for efficient component management.
Demonstration of a simple project to illustrate the lifecycle stages in action.
Use of the 'show text' state and button to toggle the visibility of the 'text' component.
Real-time updating of the component state through user input in an input field.
The use effect hook as a crucial tool for controlling component behavior based on lifecycle stages.
Default behavior of the use effect hook triggering actions on component mount.
The use effect hook's ability to execute actions during component updates based on state changes.
Specifying which state or props changes should trigger the use effect with an array.
Executing cleanup actions when a component unmounts by returning a function from the use effect.
The practical use of use effect for API calls and continuous requests while a component is mounted.
The role of strict mode in React for helping developers write better and more efficient code.
Explanation of the double invocation of use effect in strict mode for code correctness checks.
Recommendation to keep strict mode on to avoid potential memory leaks and code anti-patterns.
Upcoming episodes will feature more advanced use cases of the use effect hook.
Invitation to subscribe and support the channel for more React.js course content.
Transcripts
hey guys how's it going i'm back here
with another video and today this is the
sixth episode of my react.js course in
this video we're gonna be learning
really important stuff the first thing
we're gonna go over is um a lot of
conceptual stuff related to what exactly
the react.js component lifecycle is and
then i'm going to explain to you guys
how to use the use effect hook to
manipulate components depending on where
in their lifecycle stage they are right
so i'm going to go over all of this in
the single video and i'm really excited
to show you guys the examples if you're
interested in checking out the code for
the video it's going to be all in the
description and yeah that's basically it
so let's get into the video
[Music]
[Applause]
[Music]
[Applause]
okay everyone so in order to start
explaining how life cycle works in react
and how um the use effect hook works in
react as well i want to first uh i
created this example over here
that is going to be able to explain to
you guys exactly how everything works
but i also want to give you guys some
terminology before we start working with
this so life cycle like the word
says it's basically a description of how
a component uh like the collide check
over component just explains how uh
everything happens from the birth of a
component to the death of the component
obviously that's an analogy but um
everything that happens from the
beginning till the end so there's three
different stages
in the react life cycle there's the
mounting stage there's the updating
stage and there is the unmounting stage
so the important word to know here which
you might not know is mounting and
mounting basically uh just think of
mounting as the component appearing in
the screen or the component um starting
to exist in your project um and then
mounting being the opposite of that so
the components stop appearing in the
screen so in
in a website uh that would be the an
element a component that represents a
bunch of
html elements or jsx elements
suddenly appearing in the source code
and then unmounting would be basically
that disappearing and then updating you
guys might know what the word means it
just means that um that component it is
changing the ui and and whatever it's
returning inside of the component is
changing depending on something
such as for example a prop has changed
or a state inside of the component has
changed or something like that right
so those are the three words that we
need to understand because those are the
three stages of a react component life
cycle now
we can see this
existing and working very easily by
creating a simple project that showcases
this so there's many different projects
that you can just create to to showcase
that
this one over here i find it to be
pretty simple and it just uses stuff
that we've done in the previous episode
so i find it to be really cool um
basically we have over here uh our app
component and inside of it we have um a
state called show text which is just a
boolean true or false and a button which
when we click on it it should change the
value of the state to the opposite of
what it is right now so if it's false
and we click on the button now it will
become true and the state is used to
determine if this other component called
text
is being is appearing on the screen or
not now this other component called text
is pretty simple as well all it has is
this other state called text which is a
string
and
we're showcasing it on the screen over
here inside of a header tag but every
time we type on an input
it will change the value of that text
and you can see this working over here
because um basically we have the show
text button and show text state is false
when i click on this the text component
appears and i can start um changing the
value of the text
state right and if i want to basically
turn it off i can just click control
text again and it will disappear
now you can easily see here the three
stages of a react component life cycle
because if we inspect element which is
something i would recommend you guys get
really familiar with because
it helps a lot with any kind of web
development not just react um and we
open our screen over here we try to
navigate through our app we see right
now inside of the div with the class app
which is
where our whole app exists there's only
a button right
so this stuff over here all of this ui
over here is not currently in our code
and that makes sense because it's not
being shown right but when i click on
this now this div appears so this div
represents the text component which
means that right now what happened is we
just mounted this component into our
project so this component was not
existing inside of our project or inside
of our
instead of our web page and now it is
existing now if we open this up you can
see there's an input and there's an h1
tag the h1 tag is obviously empty
because the text state is empty
initially and the input is over here
just chilling nothing is happening to it
so what we can do now is we can start
typing on this and you'll see
immediately that the code inside of this
component over here is changing right
it's updating in real time because we
are updating our component so this is
the second stage of the react life cycle
you can see it is literally updating as
we go now we want to see the last stage
right so unmounting if we click on this
over here it's going to go back to what
it was before now we don't have that
div anymore which means we don't have
that component anymore now this is
extremely important to understand
because in a lot of times you want to
make your components as efficient and um
make them just work exactly how you want
them to work so understanding um how a
component exists and and the life cycle
stages of it is extremely important and
there is one specific concept that will
encapsulate all of that
in react and it's called the use effect
hook
so
back in the days there was actually
three different methods that you might
have seen if you're digging up react
code you might have seen something like
component did
mount something like this
ignore this kind of
stuff if you see it in the internet
that's all like old react that's when
class components was a thing um so if
you see that don't worry you don't need
to learn that what you need to learn is
that there is a hook in react called the
use effect hook this is one of the most
important hooks in react in my opinion
it is the second most important one
before the use state although i can
argue that you can have a project
without a u-state hook but you cannot
have a project without a use effect hook
so the use effect hook is a hook that is
used
to basically control what happens
depending on which stage of your
component's life cycle it is so with
this hook over here the simple function
over here we can we can
create some sort of action that will be
triggered when the component is mounting
or when the component is updating or
when the component is
unmounting so that's something extremely
cool
because it all exists um and you can do
all that inside a single um hook inside
of single function
so i know that might seem a little bit
confusing if this is the first time
you're working with a use effect so i'll
give you guys a very easy example just
continuing with whatever we have over
here and i'll show you guys exactly what
i mean so i'll come over here and if you
want to use the use effect hook all you
have to do is you just have to say use
effect
and just open and close parentheses and
then put a function inside of the use
effect so like this just a function that
exists inside of this now the use effect
by default what it does is whatever you
put inside of here as of right now
it will call for example console.log a
message over here saying
component
mounted
like this component mounted and when the
component mounts
this will be console logged that's all
it will do right now you'll see that
this happens because if i refresh my
page go to my console and i click on
this button it will say component
mountain
now there's a thing you might be
wondering why did it console log twice
now if you watch tutorials about the use
effect before
early this year which is 2022 you might
know that people might say that this
only console log once it's because react
updated i don't want to get too in-depth
about what happens here but i want to
emphasize that because that can confuse
a lot of beginners what's happening here
is
now what react does is if you have this
thing over here called the strict mode
it is supposed to help you write better
code that's the whole point of it so if
you have that currently in your project
it will do it will console log twice um
and you see i just removed it and it
will only console log once um because
what react does is it's basically
checking to see if you're handling your
use effects correctly again i won't
explain that right now i'll explain it
at the end of the video for only for
those who are interested it's actually a
pretty interesting topic but for now
just imagine that the use effect
only runs once let's just imagine that
i'll actually keep this console logged
because
it's better for for you to understand it
this way
so
as of right now the use effect only is
calling itself when the component has
mounted and you'll see that
i need to save this like this i need to
do this so as of right now you can see
that when the component mounts it says
component amounted i will um i'll
unmount it again and then i'll mount it
again and you'll see it will contour log
again so the user effect right now is
allowing us to execute an action
exactly when the component mounts which
is something we have never done before
so what what kind of action could we put
over here well in the beginning this is
very useful for when you for example
have a page where you need to make an
api call to get data from somewhere
immediately when you go into the web
page you just put it over here and
what happens is when you go into that
specific page it will fetch the data
immediately and display in the screen
that's a very very easy example on why
you might want to do something like this
right why you might want to execute some
sort of action when the comp when the
component appears or when the component
mounts now as you can see over here this
is as it is right now it's only
executing an action on one of the three
stages of a react component's life cycle
so how would we make it so that we can
console log when it's updating and we
can console log when it's unmounting we
want to see if we can actually detect
and trigger some sort of action when
those two stages are occurring so for
actually updating it's actually pretty
simple so with the use effect over here
this will be called every single time
there's a state change so what i mean by
that is whenever this component
re-renders
whatever is inside of here will be
called again so what happens is if the
component itself updates in any way it
can either be a prop that is receiving
changes or a state inside of it like
this one over here changes then this
will be called again so let's see if
that actually happens so you'll see it
will be called once because it mounted
and now if i change a state inside of
this component it will keep calling
itself
meaning that
over here
whatever we put inside of here
as it is right now will also be called
when the component is updating so the
two stages are now being triggered
now there's a caveat what if we only
want a console like this if it's mounted
but not when it's updating well the use
effect hook allows us to put an array
over here
and this array basically tells us we can
specify what props or state changes we
want
to trigger the use effect so if i put
the text over here
then what will happen is the same thing
would happen right
it will console log and trigger the use
effect hook whatever is inside of here
every time the text changes so the same
thing was happening but
if i remove the text from here
you'll see that now
it doesn't trigger it anymore
only the mounting triggers so if you
want to execute an action only once when
the component mounts you put an empty
array over here but most importantly if
you want to trigger an action every time
a specific state changes or many
different state changes you can just put
them
over here for example putting the text
over here this is really cool and it
comes in handy in so many situations so
it is extremely important for you to
understand how this works however i know
that since this is the first time you're
probably seeing the useful tuck it will
be hard to come up with examples in your
head and see the how useful this is but
don't worry i have that in mind we're
going to be using this a lot especially
in the next video now we've done two
different stages what is the third stage
of a react component's lifecycle well
it's unmounting how do we execute an
action when the component disappears so
with a use effect we can return a
function
and this function over here will be
executed when the component amounts so
if we want to console.log for example
something saying component
unmounted like this so now if we remove
this over here i want to remove it just
so you guys can
see this working better
what will happen is
immediately when we show the text the
component it should console log that the
component was mounted and if we decide
to not show it anymore it will contour
log that the component was unmounted so
i'll come over here refresh the screen
show the text it will say component
mounted and then
remove it and you'll see you'll see that
it says component unmounted so we are
triggering both things immediately so
how can this be useful there's many
different situations imagine that you're
you want to make a i don't know a
request to a service an api
when you render a component so when a
component mounts you want to make a
request for an api and continuously make
that request but then when the component
disappears you want to stop that request
well you can put the the logic for
making the request over here and put the
logic for stop like the logic for
stopping to make that request over here
so this serves for you to kind of clean
up um the mass you made um not the mess
you made but like whatever logic you put
over here if it's a logic that might
cause leaks after this you you might
want to fix it over here
so that's basically it for
the use effect hook now again i know
that um
it might not seem that useful right now
because i'm just using console logs but
the next episode is where i show you
guys the first major example of using
the use effect inside of your project it
is
my opinion the main one you use in the
beginning um afterwards you'll be using
this all the time when you get more
advanced in react but um i just needed
to make this video first so you guys
could have an idea
now i want to explain to you guys the
whole uh streak mode thing so if you're
not interested in that you can just go
to the next episode if you're interested
i'll go over why um this thing makes the
request in the use effect twice or makes
the use effect run twice
so stick around for that so basically we
have over here what is known as strict
mode so i mentioned to you guys that
strict mode over here is a way for react
to kind of
help us write better code right so what
do i mean by that well react has certain
roles um inside of their project that a
lot of people like not following
and streak mode will make some checks
for you um while you're writing your
code and prevent you from making those
mistakes i would always recommend
keeping this on because if you're make
if you're writing some code that um
strict mode is not allowing you to you
should probably not be writing that code
um so just removing it is kind of
redundant because you're literally doing
something that is an anti-pattern
something that react doesn't recommend
and it doesn't matter what use case you
have
you're running into there's always a
solution and strict mode is just telling
you that the one you have right now it's
not the best one so that's a little bit
of a rant for those who don't want to
use trick mode in my opinion you have to
and what happens over here with the
component mount
running twice is that
if i go over here right now into our
project right with strict mode and i
show the text you'll see that what
happens is the component mounted once
the component unmounted right after it
and then the component mounted again
so
that's something interesting to see
right
we thought it was running twice but what
is really is happening is with strict
mode react forces the component to mount
once then unmounts immediately after and
then mounts again so
that's just to check to see if your user
fact is running correctly because if you
messed up over here like i said you
messed up and you wrote some code that
can cause some leak so if you wrote some
code over here that can cause some type
of leak or some some type of memory leak
then you react you will know because uh
what happens is uh react will force the
component to unmount meaning the leak
will will become evident and then it
will mount again
now what happens is if your code is
running correctly meaning that whatever
logic you put over here you're cleaning
up on the unmounting stage then it
shouldn't have any issues with it
because what it's going to happen is
it's gonna mount for a sec for like a
small amount of time then immediately
unmount so if your component is running
correctly um everything should remain
the same and then it's gonna run mounts
again to actually run the use effect
like you intended to so this is just a
way to check to see if you wrote your
code correctly if you didn't then
immediately you'll see everything will
be breaking there's infinite examples of
this but um like i said since this is
the first time you guys are learning use
effects um it might get kind of
confusing if i just went on a rant about
um
different use cases of this when you
guys might have never used the use
effect before this video so
um this will become really more evident
as we go on to the series there's
actually a really cool video um from
another youtuber which goes over just
this specific topic um
meaning the the use effect calling twice
i'll prob i'll probably tag it up here
on the video if you're interested in
checking it out um it's really
interesting so with that in mind this
was it for the video there's no exercise
in this video it's the only video with
no exercises because it's hard to come
up with an exercise for the user effect
when we haven't learned stuff like api
requests or or something like that but
keep in mind that's going to be in the
next few videos so i really hope you
guys enjoyed it if you enjoyed it please
leave a like up below and comment what
you want to see next subscribe because
i'm posting two to three times a week
and i'm really enjoying this course so i
would massively appreciate if you guys
could help support the channel and i see
you guys next time
[Music]
[Applause]
[Music]
[Applause]
[Music]
Ver Más Videos Relacionados
Life Cycle Methods | Mastering React: An In-Depth Zero to Hero Video Series
A First Look at Effects | Lecture 141 | React.JS 🔥
Goodbye, useEffect - David Khourshid
The useEffect Dependency Array | Lecture 145 | React.JS 🔥
useEffect Hook | Mastering React: An In-Depth Zero to Hero Video Series
Learn React Hooks In 6 Minutes
5.0 / 5 (0 votes)