No disconnecting when component unmounts.

[tomisu]

While using this, I found this problem: if the component using this hook unmounts, React complains about a memory leak.

To fix this, resizeObserver should disconnect on useEffect's return function:

export const useResizeObserver = (ref: RefObject<HTMLElement>, callback: ObserverCallback) => {
  useEffect(() => {
    const resizeObserver = new (window as any).ResizeObserver((entries: ResizeObserverEntry[]) => {
      callback(entries[0].contentRect);
    });

    resizeObserver.observe(ref.current);

    return () => {
      resizeObserver.disonnect();
    }
  }, [ref]);
}

[zzarcon]

Hi @tomisu ! Thanks for opening this.

What you are saying makes a lot of sense to me, would you like to submit a PR with that change? I will more than happy to merge it :)

[tomisu]

@zzarcon I don't seem to have permission to push into a new branch.ERROR: Permission to zzarcon/react-resize-observer-hook.git denied to tomisu.

[yvt]

@tomisu You can create a fork and push the change to it. After that, you can create a pull request based on your fork (see GitHub's documentation on PR).

But since you are making a small change, there's an easier way to do this: Go to the file you want to change on GitHub, and click the pencil icon on the upper-right corner. After that, the website should guide you through the process.

[tomisu]

Thanks @yvt ! I didn't know that.

Here's the PR; I hope I did everything OK: https://github.com/zzarcon/react-resize-observer-hook/pull/4

[Lanchez]

Isn't there a typo there? resizeObserver.disonnect(); <-missing c

[tomisu]

You're totally right, how embarrassing!

I crated a PR: https://github.com/zzarcon/react-resize-observer-hook/pull/6

Thanks!

[yvt]

@zzarcon Since these PRs are all merged and it's been a while since then, can you publish a new version to npm?