How does "unsubscribe" in the useEffect cleanup function actually work?

October 8, 2022

In many code examples I see something like this:

const [items, setItems] = useState([]);
useEffect(() => {
    setItems(store.getState().items.length);
    
    
    const unsubscribe = store.subscribe(() => {
        setItems(store.getState().items.length);
    });
    
    return unsubscribe; // <-- huh?
}, []);

My question is; how does returning a reference to the subscription unsubscribe from it?

>Solution :

const unsubscribe = store.subscribe(() => {
   setItems(store.getState().items.length);
});

This call to store.subscribe immediately creates a subscription with the redux store, and then redux returns a function to you. This returned function is an unsubscribe function which knows how to tear down the subscription. If you’re curious, here’s the source code where they create that function.

return unsubscribe;

By returning the unsubscribe function, you tell react "hey, when it’s time to tear down this effect, please run unsubscribe". React will then call it at the appropriate time: either when the component unmounts, or when the dependencies on the effect change.