Watch component width changes

useWidthObserver.ts

import debounce from 'lodash/debounce'
import { RefObject, useEffect } from 'react'

export const useWidthObserver = <T extends HTMLElement>(
  refObject: RefObject<T>,
  setWidth: (width: number) => void
) => {
  useEffect(() => {
    function resizeListener() {
      if (refObject.current) {
        setWidth(refObject.current.clientWidth)
      }
    }

    window.addEventListener('resize', debounce(resizeListener, 300))
    return () => window.removeEventListener('resize', resizeListener)
  }, [refObject, setWidth])
}