Add enabled parameter to useResizeObserver hook

[leroykorterink]

I don't think this param will be used very often but want to know if we think we need it. I don't know if I like a 4th parameter for the hook function signature. I think it's fine to just do an early return in the callback.

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]);
}

Originally posted by @leroykorterink in #158 (comment)

Solution with enabled parameter

const [enabled, setEnabled] = setState(true);

useResizeObserver(
  target,
  () => {
    // Do something on resize
  },
  {},
  enabled
);

Solution using early return

const [enabled, setEnabled] = setState(true);

useResizeObserver(target, () => {
  if (!enabled) {
    return;
  }

  // Do something on resize
});