I'm going to create a component named "EffectExample"
And then I'm going to show you how the useEffect hook works
basically, this hook replaces
the component's life cycle
but we shouldn't compare the life cycle and the useEffect
they are different concepts that work completely different, alright?
So, I'm gonna start by creating a "FunctionalComponent" with React
And I'm gonna import here the useEffect, alright?
and I'm gonna add here too the "useState"
useState is more simple, probably everyone that has already gone through hooks knows how to use it
I'm gonna create a state here
so it will be a "counter"
and "setCounter", alright?
I'm going to use "useState" and it will start this counter with the value of 0
Then, I'm going to have a "button" inside my application
Let me create here a little structure
to show this "counter" inside of an H1
and I'll create a "button"
that when the user clicks it
I'll use a "setCounter"
bein the "counter" +1.
okay?
and here I'm gonna put "Add"
So, let me save this
and I'll import this "effectExample"
that we created here
and I'll add to my application
I can remove the "Provider" from the redux
I'm not going to use the redux here on this example
Let me save this
and I'll run my application again, because I cancelled it
We click on "Add (Adicionar)",
right?
and the state "adds",
nothing really complex about this
just using the "useState"
Alright
So now, let's understand how the useEffect works
the useEffect,
it has two parameters, it recieves two parameters
the first one is a function
and the second one is a dependency array
we can call it this way, alright?
the function that we add on the first parameter
is the code that we want it to run
the second parameter is WHEN we want it to run, alright?
so, here in this dependency array,
we will add, for example, ALL the variables
that when they are changed, the useEffect needs to run again
so, if I wanted, for example,
to imitate the functioning of the "componentDidMount"
inside our component, that is something that runs only once,
I would need to leave this in blank, an empty array,
which means this has no dependency, it will run only once.
if I add a variable here,
this "useEffect" will run everytime this variable changes
so, for example, if I don't add anything here
and set my document title
"window.document.title" = counter
(I can use only "document.title", it works just as fine)
and save it, since I'm using the ESLint
it has already put the counter inside there automatically , did you see it?
because since I'm using this counter inside the useEffect
it is crucial to put the counter here,
because our useEffect function
depends on this variable to run
and it should only be run when the counter changes.
so, just as an example, I'll change to 5 here
if I save this now, I can see that the title of my application
- it is a little small - but it is set as "5"
and this, independently of how many times I click on "add (Adicionar)"
this will only run once,
it won't run again, because here I don't have any dependency
which means my useEffect doesn't depend on any variable
there's no reason for it to run again
once I depend on a variable,
so I will change the title of my page to "counter"
I need to add the counter here too
and now, everytime the variable counter changes
this code right here will be run again
so if I save this now, as I click on "Add (Adicionar)"
we can see that the page title also changes.
So, basically, this is the "useEffect"
it is a function and what it depends on, alright?
- What could I compare? -
I could compare that useEffect
(I don't like to compare them, but I'll do it anyway)
that, the useEffect without any parameters is the same thing as "componentDidMount"
the useEffect, when I add one or more parameters
it would be kinda like the "componentDidUpdate"
doing the comparison when the prop changes, okay?
and we're left with our famous "componentWillUnmount", alright?
so let's suppose that I want to run a function, for example,
when this component is dismounted, okay?
I could - uhhh -
we could do a really nice example here
let's suppose that when this component disappears
I want my app title to become "ReactJS" again
that is that initial title that our index.html is defined
"ReactApp" here
I could simply, here from this useEffect,
return a function
and when I return a function,
it will use this as the "componentWillUnmount"
let's say it like that
so here I add "document.title = ReactApp" , alright?
saving this right now,
we will do this: going back to our app,
I'll make this disappear after, uhh IDK, after 5 seconds
so I'll create an useState here
I'll declare it, for example, "visible"
and "setVisible", okay?
"useState" it will start as "visible"
and here I'll just verify this quickly
if it is "visible", I'll show this,
otherwise, I won't show it.
So, after our variable here "visible" is changed to "false",
it will...
it will disappear with this component here
so I'll declare a "setTimeout" here of 5 seconds
and then I'll use "setVisible" as being "false"
let's test it right now
I'll run the app here, I'll click "Add (Adicionar)" a few times
look, it changed the title to "1, 2, 3, 4" , wait a little bit now
it removed the component and the title is back to "ReactApp"
we can see, it is "ReactApp" now
Why? Because when I return a function of my useEffect
it will use this as a "componentWillUnmont"
which means that everytime our component is unmounted
it will run this function in an automatic way
I guess useEffect is basically this,
it seems complicated but we can't
compare useEffect with life cycles we had before
I guess this is the main mistake and what makes it seem complex
but dude it is really simple
the function that needs to be run,
when it needs to be run,
and, if the component is unmounted,
what I need to "unmount" let's say it like that
this is often used when we subscribe "event listeners"
so if we are using an observer structure
of an event listener, here is where we will take these "event listeners".