REACT FLUX TUTORIAL #14 - React & Flux Memory Leaks Video Lecture | Learn and master: Flux - Game Development

I want to take a minute to talk about
memory leaks before we move forward and
add more features to our application now
a memory leak is whenever you unbind or
you fail to unbind an event in
JavaScript or a listener in JavaScript
so JavaScript keeps your object in
memory and it keeps building up in
memory building up in memory to all
sudden you're out of memory in your
browser either crashes or starts running
very bad memory leaks can actually cause
your entire computer system to run
poorly because lots of these browsers
can consume so much memory on your
machine if you allow it to so I have a
memory leak going on right now let me
show you what happens I can hit reload
and then my flux store goes ahead and
updates now I can toggle away to a
different page come back and my store
still remembers all the changed
information but if I hit reload a second
time I get an error message hey you
can't call set state on an unmounted
component and your first thought is
probably well clearly it's mounted I'm
seeing it right here and let me show you
what's going on this is the offending
code right here on component will mount
we're calling set state if the to-do
store changes we're binding this
listener right here however every time
we change our route a brand new to-do
component gets created and we can do
this because virtual Dom is only going
to update the Dom if this new to-do
component changes the Dom renders out
differently than the old to-do component
did so we're creating a new to-do
component we're injecting it with all
our current props and if nothing's
changed we don't update the Dom if
something has changed then we update the
Dom so everytime we render we go through
the render tree there's a brand new -
duze component getting created that
means the first time around this guy is
going to listen to the store and then
when he goes away and the next guy comes
along he listens to the store as well
and when you hit that button I went to
do store changes both components are
going to try to update their state
except for the original component isn't
at all connected to the Dom tree anymore
let me kind of show you how we get
around this first I want to prove to you
that that's what's going on I'm going to
oh what is the I forget what the event
Center API is listener counts let's go
ahead and console.log this so the count
of my event listeners for change events
let's go ahead and do this let's go
ahead and reload so the first time in
I'm getting one listener I come back now
I have two event listeners on to do
store change events three event
listeners four event listeners five so
if I hit reload and that thing changes
four times now components that shouldn't
even exist anymore just try to update
their state so that's the problem the
way around it is very simple we just do
a component will unmount method and
they're just going to remove that event
listener so to do that we basically just
want to extract this out to its own
function let's pull this out to its own
function will call this get to Do's
there we go get to do is going to do
that I'm going to automatically bind
this guy to this so I don't have to bind
it all over the place this get to dues
equals this get to dues bind this there
we go so now whenever I reference get to
do is it's automatically bound and I can
go this get to dues so there we go I've
made my listener I'll leave that console
log in there and that will be what was
that to do store listener count change
and on a component will unmount going to
unbind listener I believe that's the
control at the command for that I always
forget what that command is because I
feel like it should just be off if it's
on so we run binding that listener now
so let's go ahead and check that out
let's remove yep unbind listener is not
the function I always forget that go-to
event and internode find out what that
is remove listener goodness it's the
thing you do once every month
so there we go when component will
unmount we're just going to remove that
listener and look
count stays one count remains one no
matter how many times I rerender that
and I hit reload and I don't get the air
I leave I come back I hit reload I don't
get the air so now no matter how many
times I toggle back and forth toggle
back and forth my browser is going to be
able to get rid of all those old
components that don't matter anymore
it's going to release them from memory
because there's no more event listeners
associated with those my memory stays
clean and I can move forward so it's
very important that if you're listening
to any events on Mount that you unlist
into those events on unmount that's the
gist of memory leaks anything you bind
you really want to make sure that that
gets unbound