How to get the latest state in useUnmount ?

[malash]

Is your feature request related to a problem? Please describe.

Imagining you implemented a counter component and would like to log the latest count when component unmount.

const Comp = () => {
  const [count, setCount] = useState(0);
  useUnmount(() => {
    console.log("comp unmount", count);
  });
  return (
    <>
      <div>Count: {count}</div>
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
  );
};

Because useUnmount use useEffect with deps====[]. The first rendered callback console.log("comp unmount", 0); was cached and won't update. So in the above example, the output will always be 0 rather than the latest count value.

Describe the solution you'd like
A clear and concise description of what you want to happen.

I create a demo at https://codesandbox.io/s/funny-dirac-z0cl9

There are two versions on useUnmount, one is from react-use and another is wroten by useRef and useEffect.

You should

1. Click show / hide button to mount the counter component.
2. Click + button to change the value
3. Click show /hide button again to unmount the counter
4. See console logs

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

useUnmount should cache callback by the second param deps as same as other hooks like useEffect, useCallback and etc.

useUnmount(callback) means callback won't be cached and the latest rendered callback will be called.
useUnmount(callback, [count] means callback cache will update if count changed.
useUnmount(callback, []) mans callback will be cached for the first time rendering and won't update anymore.

cc: @byunicorn

[xobotyi]

It should not use the deps, but its definely a bug.

I'll take a look today.

[streamich]

🎉 This issue has been resolved in version 13.8.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀