Scribd
Upload
49 views2 pages

Disposing Setters When Components Are Unmounted

This document discusses how to dispose of setter functions when React components unmount to prevent errors. It recommends using the useEffect hook, passing an empty array as the second argument so the callback only runs on unmount. The callback should return a function that removes the component's setter from the store, avoiding attempts to set state on an unmounted component.

Uploaded by

Minal Barhate
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
49 views2 pages

Disposing Setters When Components Are Unmounted

This document discusses how to dispose of setter functions when React components unmount to prevent errors. It recommends using the useEffect hook, passing an empty array as the second argument so the callback only runs on unmount. The callback should return a function that removes the component's setter from the store, avoiding attempts to set state on an unmounted component.

Uploaded by

Minal Barhate
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Disposing setters when components

are unmounted
This basic implementation has a serious issue: What happens if
we unmount AnotherComponent? we would still have two setter
functions registered under store.setters and when the store state
gets updated, React would complain about we trying to set the
state of an unmounted component.

We need a way to know when components get unmounted to get


rid of their setter functions. We can do that by adding another
hook to the mix: useEffect.

This hook expects a function that'll be called whenever the


component is mounted or updated. This function can also return
another function that'll be called when the component is
unmounted. Learn more about the useEffect api here.

In our case, we only need to trigger it when unmount happens. We


don't care about mount and update.
We can tell useEffect to skip updates. This is possible by providing
an empty array as the second argument to the hook. An empty
array means we do not depend on any props or state, so React will
only execute the callback on mount/unmount.

If the function provided to the hook only returns a second one


(the unmount callback, as specified in the useEffect api), then the
mount trigger won't do anything.

Yes, this is confusing. Worry not, let's see it in action:

Lines 7, 8 and 9 implements the hook, passing a function A that


returns another function B. B will be executed every time the
component unmounts. When it does, it'll remove the setter
function for the component from the setters list, so we won't try to
update the state of a component that is not rendered anymore.

You might also like