React Hooks for Textarea Auto Height

useAutoHeight.tsx

const useAutoHeight = (text: string, inputRef: React.RefObject<HTMLTextAreaElement>) => {
  const threshold = 4;
  const additionPx = 2;

  const prevText = useRef(text);
  useEffect(() => {
    const input = inputRef.current;
    if (input) {
      const isContentReduce = text.length < prevText.current.length;
      let oldHeightStyle = null;
      const height = input.clientHeight;
      if (isContentReduce) {
        oldHeightStyle = input.style.height;
        input.style.height = '5px';
      }
      const scrollHeight = input.scrollHeight;
      if (Math.abs(height - scrollHeight) > threshold) {
        input.style.height = `${scrollHeight + additionPx}px`;
      } else if (isContentReduce) {
        input.style.height = oldHeightStyle;
      }
    }
    prevText.current = text;
  }, [text]);
};