Add support for effects with cleanup?

[mindplay-dk]

Should we add effects with cleanup?

There is currently no way to perform an action when a component gets destroyed.

[yisar]

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline)
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange)

    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange)
    }
}

The use case from the react document looks like when useEffect returns a function, we execute it
The function contains unmouted logic
Am I correct?

[mindplay-dk]

Yes:

the function passed to useEffect may return a clean-up function [...] The clean-up function runs before the component is removed from the UI to prevent memory leaks. Additionally, if a component renders multiple times (as they typically do), the previous effect is cleaned up before executing the next effect

[mindplay-dk]

(Preact hooks are a good source of reference, as the code is very simple and easy to understand.)

[yisar]

Well, I need to think carefully about the correct implementation here. My previous understanding may be insufficient.~

[yisar]

@mindplay-dk I refactored the useEffect, and now it should be able to resolve these two issues #63 #64

[yisar]

supported Now!

[mindplay-dk]

Looks good, just one small deviation from how React works - from the description in the yellow note box on this page:

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run.

So, to summarize:

useEffect(f)       // ✅ effect (and clean-up) every time
useEffect(f, [])   // ❌ effect (and clean-up) only once in a component's life
useEffect(f, [x])  // ✅ effect (and clean-up) when property x changes

[yisar]

Where is the deviation? The summarize is right 😆

[yisar]

@mindplay-dk I tried the use case of react, which would not execute when the array was empty.

useEffect(f, [])   // ✅ return function( such as clean up) should not run.

So fre's current behavior should be consistent with react

[mindplay-dk]

I tried the use case of react, which would not execute when the array was empty.

The clean-up function of an effect always runs - the question is only when.

With an empty array, the clean-up function should run only once, when the component is destroyed.

[yisar]

I didn't even notice this detail. I've fixed it and it works now 💯

[mindplay-dk]

Looks good!

Still needs tests for useEffect() with no second argument, and with [] - let's leave this issue open until all the tests are in place.

[mindplay-dk]

We have tests for this now. Closing!