Don't recreate ResizeObserver on callback reference change

[leroykorterink]

See title

[ThaNarie]

Do we want a separate ticket to support unobserve, e.g. having a boolean arg that defaults to true, but can be set to false to unobserve ?

[leroykorterink]

function useResizeObserver(
  target: Unreffable<Element>,
  callback: ResizeObserverCallback,
  options?: ResizeObserverOptions,
  enabled = true,
): void

Implementation will be similar to this:

export function useResizeObserver(
  target: Unreffable<Element>,
  callback: ResizeObserverCallback,
  options?: ResizeObserverOptions,
  enabled = true,
): void {
  const memoizedOptions = useMemo(
    () => options,
    [JSON.stringify(options)],
  );

  const callbackRef = useRefValue(callback);
  const resizeObserver = useClientSideValue(
    () =>
      new ResizeObserver((entries, observer) => {
        callbackRef.current?.(entries, observer);
      }),
  );

  useEffect(() => {
    const element = unref(target);

    if (element === null) {
      return;
    }

    if (enabled) {
      resizeObserver?.observe(element, memoizedOptions);
    } else {
      resizeObserver?.unobserve(element);
    }

    return () => {
      resizeObserver?.unobserve(element);
    };
  }, [enabled, memoizedOptions, resizeObserver, target]);
}

[leroykorterink]

Feature is enhanced in #274