[BUG] useUnmount() writes to a ref unsafely during render

[VanTanev]

Describe the bug

A ref should never be updated in render.

The corrected hook is:

export function useUnmount(func: () => void) {
  const funcRef = useRef(func)

  // must be a separate use effect
  useEffect(() => {
    funcRef.current = func
  }, [func])

  useEffect(
    () => () => {
      funcRef.current()
    },
    [],
  )
}

To Reproduce

From the official React docs

Expected behavior

Do not mutate refs in render, because a render can be backed out before it's committed, and the mutated ref with possible incorrect behavior will stick around for the real cleanup

Additional context

No response

[chriszrc]

In addition to this, useUnmount runs an unmount no matter what in development mode, which can lead to very confusing behavior. Would be nice to add an additional const isFirstMountRef = useRef(true); and check for that first unmount and ignore it-

[moulichan99]

Im a Senior Frontend Engineer with over 5 years of experience, and I'm new to the open-source community. I'd love to contribute — may I work on this issue?