React 19.2 introduced useEffectEvent — a new React Hook that solves one of the most confusing problems developers face inside useEffect.
In this video, we’ll understand React useEffectEvent step by step with a live Counter App example.
We’ll first see what happens when state like `count` is used inside useEffect, why React asks us to add it to the dependency array, and why adding that dependency can cause an Effect to clean up and run again every time the value changes.
Then we’ll understand the actual problem:
How can we access the latest props or state inside Effect-related logic WITHOUT unnecessarily restarting the Effect?
That’s exactly where React 19.2 useEffectEvent comes in.
You’ll learn:
✅ What is useEffectEvent in React 19.2? ✅ Why did React introduce the useEffectEvent Hook? ✅ useEffect vs useEffectEvent ✅ How dependency arrays work inside useEffect ✅ Why useEffect runs again when dependencies change ✅ How useEffect cleanup works ✅ Why setInterval gets recreated ✅ How to access latest state inside an Effect ✅ Reactive vs non-reactive logic in React ✅ How useEffectEvent prevents unnecessary Effect re-synchronization ✅ Counter / setInterval example ✅ Real-world WebSocket / chat connection example ✅ When you should and should NOT use useEffectEvent
The core idea is simple:
We may need the latest state or props inside Effect-related logic, but that does NOT always mean that changing that value should restart the entire Effect.
React's useEffectEvent lets us separate that non-reactive logic from the reactive Effect.
For example, if a WebSocket chat connection depends on `roomId`, changing the room should reconnect.
But if only the UI theme changes, we usually do NOT want to disconnect and recreate the complete WebSocket connection just because the theme changed.
That separation between reactive and non-reactive Effect logic is what makes useEffectEvent one of the most important React 19.2 Hooks to understand.
If you're learning React 19, React 19.2, React Hooks, useEffect, dependency arrays, stale closures, or modern React development, this video will help you understand WHY useEffectEvent exists — not just memorize its syntax.
🚀 React Live Online Classes: [ADD YOUR KODYFIER LINK]
Watch the other React 19 videos in this series to learn the latest React features step by step.
⌛TIMELINE⏳ 00:00 useEffectEvent React 19.2 – Counter App Live Demo 01:15 Must Watch React 19 New Features Series 01:50 Understanding useState + useEffect Code 02:30 Why React Adds `count` to useEffect Dependencies 04:20 The Real Problem with useEffect Dependencies 05:10 Why the Effect & setInterval Keep Restarting 06:30 What is useEffectEvent in React 19.2? 06:50 How useEffectEvent Gets the Latest State Without Re-running the Effect 11:10 React Live Online Classes – Kodyfier
AI Generated·May contain errors
Video Summary
AI Generated
This video explains the `useEffectEvent` hook introduced in React 19.2, demonstrating how it solves the problem of \"stale closures\" and unnecessary effect re-runs when dealing with state variables inside timers or intervals.
Hey, Gais, please look carefully at this button here labeled "Increment"
The moment is mine, I do it, click
You can see my count state variable here
Its value has increased to one here.
Now, if you're going to speak, it's just a very simple counter application, isn't it?
But let me inform you, today, through this very example, I will show you another new one
The hook introduced in React version 19.2
Hey guys, the name of that hook is Use Effect Event
Why did we need this hook?
How does this hook help us?
Today in this video, we will see all of this.
It is still zero out of zero.
Look here, right here
It is still zero out of zero.
So there's a problem here, isn't there
I'll show you the code once, okay?
You can see, this is its code.
Too damn simple.
Before explaining the code
I would like to welcome you all back.
My awesome channel Thapa Technical
And I'd like to tell you guys, before this, I had five more
I have already uploaded it from the video.
about React version 19 latest feature
And above the update, they haven't yet
Your no more manual loading
Now your goodbye use context
Once in 19.2
A hook and a new feature were introduced.
You must definitely check this out—it'll be really fun.
Alright, back to our
Just watch the video, it's simple
First, look here from the front.
A deep is h2 normal
h1 This is your main here, there is one
Button Whenever you press this button
I click, basically
With the help of a use state
count and a set count update function
So, set count is basically a callback function.
You can also call it a fat arrow function.
Whoever is inside me
I am incrementing the value of current count by one.
This will come even to beginners.
So, you've already got this value.
There was no problem with the count here.
A problem arises when
You want it to be my latest
value is after every
like 3 seconds, 2 seconds
You know, you should keep moving in the background.
What do we use for it? set interval
and for that, what do we need to use?
We have to use usePropertyChanged
So that he can comfortably handle the effect
So inside the use effect, this is your callback
function and then us at the end
Pass a dependency array
but right now you can see it very clearly
in our case, the dependency
It is an array, and it is currently empty.
means an empty dependency array
when your component first time
will be mounted, meaning the first time this
It will render, that's when it will happen
Your usage effect will work.
And a gap will be created for you.
Due to which every 2 seconds
We will log the value of this count to the console.
Now, here our biggest enemy is
This is an empty dependency array
because it is empty, so after
every 2 seconds your
interval, basically, if it's running at all
So, this value of count
You will see the same value here.
When the component for the very first time
had mounted, and this use effect
I had gone there for the first time back then
The actual value of count was the same as yours.
It will appear every 2 seconds
Which I don't need
Due to which, whenever
The value of this count will now be incremented.
Whenever it gets updated, it will be here
This is what I have by keeping him
The effect will be called back.
Hey, let me tell you something
Look closely here, pay close attention
I clicked on it once.
What is this, coming here?
I click from the fat, I have five done
Every 2 seconds, my current value is 5.
Problem solved, but guys, problem solved.
No, it didn't work here. What problem occurred?
Now I will tell you; please look carefully.
So far, everything seems correct to you.
On my console too, it's equal to my current value.
The state variable that I am getting
But reality, brother, is different.
Why, let me tell you, take a close look
As soon as I click this button
And you know, every time your state variable gets updated
Your component will be re-rendered.
As soon as this re-renders or when
Your use effect will be called back from the inside
Is it going to come back?
And if you look closely here at this time, then
We have a cleanup function.
Then, first of all, your clean up function will run
I mean, a new interval will be created again.
where after every 2 seconds
You will receive the value of count
Then you will receive a new value at that time.
So guys, there's a problem here, and the problem is this
that if you notice
Then every time I click the button
to increase and whenever whenever
My count value will be incremented.
What will happen every time?
The value of count will change.
The component will re-render.
react that will check the dependency array
Your basic use effect, isn't it?
There inside him, what we have
The cleanup function will run.
It will remove your old interval.
Your effect will go back from there.
And a new interval will be created from the return.
So, guys, have you seen what the problem could be?
Whenever I click the button
I will update the value of the state variable.
The interval I have
It keeps restarting and keeps being recreated anew.
And to be honest, this is us
No, we didn't need it. What we needed was
We needed this timer of mine
Just start once
I mean, I'll start the timer once.
After that, every two seconds
The latest value I have
Effect without meeting me
Just rerun it, guys
Here is where your task comes in.
effect event Now I
Let me quickly explain what a use effect event is.
It's his job, guys
Your timer will start for the very first time
But whenever you press the button after that
Click and your state will be
The value of the variable will be updated, guys
Due to the effect of the event, now he/she
The latest value in your props
You can now access it state.
Rerun the effect without it being active
I hope guys you've got it now
with the help of the use effect event
Whatever is inside him
It will be code now, the one that's outer
The latest on props and state
It has value; access it.
without effect
Rerun, okay, how does it work?
I will now show you the lab practical.
Look, you have a problem here
Come on, you've already gone, repeatedly coming back to me
Cleanup function is running, old one is being removed, new interval
We will use use effect event
Alright, so first of all
use event one
It's a hook, and normally like
We define the hook, okay?
Pass the callback function inside like this
This method is not normally used.
Okay, here it is, all right, take a look
You'll have to import it on top, mine
By default, it has imported for you
Here, get it from react
You will need to import it now, inside which you will have
I have to pass that logic.
I'm copying it from here; I removed it
Here I've pasted it.
That's exactly what was stated in the definition, wasn't it? Inside the use effect event.
Whatever code you have now
They have the power that they are outside.
The value of the props state
Now, if you look closely, this is now yours.
It has become a function expression.
Now this on tick
I'm fine with it
in this manner within the interval
I'll paste it, that's the whole point
Khataam was only supposed to do this much.
The logic inside it was that one.
basically you used it somewhere else
Put inside the event and
Whatever value it may be, we will have it on tick.
Passing and because now I have function
If you need to call, then this variable to me
I will call it in this way within the function by accessing it
Then it will be called.
I mean, now here
Look closely at the count, this one here
My variable is a state variable
It's not even inside it to begin with.
So finally now this thing that
count value is what I mean
The variable that is mine, give it to me
There is no need to pass here.
What happened again? We are
Back to our dependency, I mean
empty dependency array due to which
Now for the very first time
When our component mounts
Your use effect call will be made
Inside it, guys, your timer
It will be set.
and after that, it would never run again
That's exactly what I needed.
That's exactly what we needed— you keep on
The effect will not be called; it will run only once
I just needed the condition, that was all.
every two seconds
The latest value of count
The one that is needed, that count
We said that in order to obtain it, we had to
The use effect event will help us
So I put him inside her.
Isn't it authentic? The function is
I've passed it here.
If you do this much
If you're walking here
I'll refresh it once.
Now I click it
Just two seconds, no more
9 came, so 9 arrived
I click twice on 11 then
Now you are seeing here
The use effect I have isn't re-running repeatedly.
The timer started only once for me.
Whenever I click on this from now on
Without any problem
My latest value which is
I can access it now.
And this became possible with the help of
use effect event
Here, guys, this is the clean up function
Not tension, because it's just running once anyway
The timer is ready on my end.
So, I hope you guys like today's video
Aga and use effect event
This is one of the simplest
The use case is one that I have with you
Share it so that you get instantly
It will be easily known that yes
What was the problem and how was it
How does the use effect event work?
Solving it, okay, there are many such ones of it
You will get examples, such as when
Are you any chatting application?
You are creating it for the very first time
If you need to create communication there
You'll have to call him, but then
If you need to change the theme later
Usually just chat casually
To go back to change a theme
from you connection new connection
Won't the theme change like this again?
The connection has already been made; we just need to change the theme.
For you all, I have another simple one
I'm making an analogy, just as you have with TV
Lie down and you'll fall asleep on the sofa.
A channel is already running for you.
Held the remote and set it down
I changed the picture mode.
Changed the theme, changed the subtitle
Wanted to adjust brightness or wanted to change brightness
Tell me one thing, please
For him, what are you repeatedly
You will turn the TV on and then off.
You won't do it right
So this is it, guys, this is what useEffect means
I mean, your TV is already on, isn't it?
It will remain empty; the setting will change.
I mean, the connection will be established.
The theme will change shortly, guys
that's the idea behind use
effect event and by the
Hey guys, if you want to, from me
Learn to react live then
Live react in 20 days
online classes that I am about to start
This will be my second batch of React.
So if you are interested, please
I'll write React at the bottom.
I will share the link with you all.
Alright, but yes, today this video
Clip not available. I hope you like the video.
But with friends, it's all lively and bustling
Next target of the Sear Channel
You haven't subscribed yet
Please do it, I'll meet you
Next video, sesame seeds
Gais were in this video
But you're going to like it.
Please do it
