React hook for checking if text is overflowing

useIsTextOverflow.js

import { useState, useEffect, useCallback, useRef } from 'react';

function useIsTextOverflow(value) {
  const [isOverflow, setIsOverflow] = useState(false);
  const [elementRef, setElementRef] = useState(null);
  const [elementSize, setElementSize] = useState(0);
  const observerRef = useRef(null);

  const refCallback = useCallback(node => {
    if (node) {
      if (observerRef.current) {
        observerRef.current.disconnect(); // in case react triggers the ref callback again or for a different node
      }
      // we want to keep track on size change so we can re calculate the overflow
      observerRef.current = new ResizeObserver((entries) => {
        const [element] = entries
        setElementSize(element.contentRect.width);
      });
      setElementRef(node);
      observerRef.current.observe(node);
    }
  }, []);

  useEffect(() => {
    if (elementRef) {
      const { scrollWidth, clientWidth } = elementRef;
      const isOverflowing = scrollWidth > clientWidth;
      setIsOverflow(isOverflowing);
    }
  }, [value, elementRef, elementSize]);

  useEffect(() => {
    return () => {
      if (observerRef.current) {
        observerRef.current.disconnect();
      }
    };
  }, []);

  return [isOverflow, refCallback];
} 

export default useIsTextOverflow;