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

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?

CodePudding user response：

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.

CodePudding user response：

.subscribe returns a function that unsubscribes the change listener. That is what you return from useEffect callback and is called as cleanup.

It gets called automatically. So questioning that is like questioning how does useEffect run after renders. React takes care of this so you do not have to worry.

CodePudding user response：

the cleanup function runs before every render. So every render it will run before the useEffect. It will also be executed when the component unmounts, and then of course the rest of the useEffect will not run anymore

CodePudding user response：

The useEffect cleanup function allows applications to prevent having memory leaks by 'cleaning up' any effects. In a basic example you have this structure

useEffect(() => {
        effect
        return () => {
            cleanup
        }
    }, [input])

Here you will see the useEffect method will run an effect whenever an input in the dependancy array gets updated. So if your useEffect returns a function once it's time to unmount (or update) it'll run that function.

As for how it works think of the logic, when the component mounts we run the code and store the result. When it comes time to unmount or rerender the stored result will run first cleaning up any logic.

Now more specific to your code I don't think it makes sense, you should investigate the store.subscribe method and that will most likely answer your question.

EDIT after seeing the Link to the code you'll see the initial question had a memory leak in it.