ReactJS Course [6] - Component Lifecycle | UseEffect Tutorial

Summary

This 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

00:00

📚 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.

05:02

🔧 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.

10:03

🌐 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.

15:05

🛠️ 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.

Keywords

💡React.js

React.js is an open-source JavaScript library used for building user interfaces, particularly single-page applications. It is the main focus of the video, where the instructor discusses the component lifecycle and 'useEffect' hook within the context of React.js development. The script mentions it as the subject of the course and the framework in which the examples are built.

💡Component Lifecycle

The component lifecycle in React.js refers to the stages a component goes through, from its creation (mounting), to updates, and eventual removal (unmounting). The script explains the importance of understanding these stages to write efficient React components and uses the lifecycle to illustrate how the 'useEffect' hook operates within these stages.

💡useEffect Hook

The 'useEffect' hook is a feature in React.js that allows developers to perform side effects in functional components. The video emphasizes its importance for manipulating components based on their lifecycle stage. It is used to run actions when a component mounts, updates, or unmounts, which is demonstrated with examples in the script.

💡Mounting

Mounting is the first stage of a React component's lifecycle, where the component is inserted into the DOM. The script uses the concept of mounting to explain when certain actions within the 'useEffect' hook should be triggered, such as making an API call when a component is first rendered.

💡Updating

Updating is a stage in the component lifecycle where a component re-renders due to changes in state or props. The video script illustrates updating by showing how the 'useEffect' hook can be configured to respond to state changes, thus allowing components to update in response to user interactions.

💡Unmounting

Unmounting is the final stage of a component's lifecycle, where it is removed from the DOM. The script explains how to use the 'useEffect' hook to execute cleanup logic when a component unmounts, which is crucial for preventing memory leaks and ensuring the application's efficiency.

💡State

State in React.js is an object that represents the part of the component that can change. The script discusses state in the context of updating components, showing how changes to state can trigger the 'useEffect' hook and cause components to re-render.

💡Props

Props, short for properties, are the mechanism by which data is passed from a parent component to a child component in React.js. The script mentions props as a potential trigger for the 'useEffect' hook, indicating that changes to props can also cause components to update.

💡Strict Mode

Strict Mode is a React feature that helps developers to identify potential problems in their code. The script explains that Strict Mode can cause the 'useEffect' hook to appear to run twice, as it forces a mount and immediate unmount to check for issues, which is an important aspect of debugging React components.

💡Memory Leak

A memory leak in the context of React.js occurs when a component continues to consume memory after it has been unmounted, leading to performance issues. The script uses the 'useEffect' hook's return function to demonstrate how to prevent memory leaks by cleaning up subscriptions or intervals when a component unmounts.

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]