[Feature]: useUnmountEffect about slash

[HoseungJang]

Thanks @ChanhyukPark-Tech .

Could you show us some example?

Because I think there are not much cases to use only cleanup function without any "effect".

I think this is the general case:

useEffect(() => {
  window.addEventListener(/* ... */); // the "effect".
  return () => window.removeEventListener(/* ... */); // cleaning up the "effect".
}, []);

[raon0211]

This is actually an anti-pattern since every effect and cleanup must match. (See https://beta.reactjs.org/learn/synchronizing-with-effects) If not, the app might break in React 18 strict mode.

So I think it is not appropriate for this hook to be merged into our libraries. For debounce and Lottie — I think they are incorrect code. So I think we should fix them.

[ChanhyukPark-Tech]

I agree too much with the opinion that there are not many situations where there will be cleanup without effect!
The case that I need to use this hook is as follows

currnet @toss/lottie: Lottie.tsx 177 line

  useEffect(() => {
    if (!isVisible) {
      return;
    }

    if (!autoPlay) {
      return;
    }

    startAnimation();

    return () => {
      animationChain?.destroy();
    };
  }, [animationChain, autoPlay, isVisible, startAnimation]);

I think animationChain is
It doesn't seem to have much to do with autoPlay, isVisible, and startAnimation in the dependency array.
But I felt awkward being in the useEffect hook where they were connected.

If the animationChain should be destroyed when this Lottie.tsx component is unmounted,

useUnmountEffect(() => animationChain?.destroy());

at the top of this file
I thought it would be better to write that!

I can also use useUnmountEffect if I need to execute the callback I received from the parent component when the child component is unmounted

Another example

In useDebounce hook 28line

useEffect(() => {
    return () => {
      debounced.cancel();
    };
  }, [debounced]);

there is no effect but only cleanup function is executing
So I think useUnmountEffect can improve this situation using

useUnmountEffect(() => debounced.cancle());

thank you😃

[ChanhyukPark-Tech]

Thank you for your kind explanation!
If I am working on a code to use like that pattern in the future, I should think about changing the structure itself.
I learned a lot!