Lesson 12. Custom hooks to use the browser’s APIs 4. Exercise: Get an element’s size

The hook useElementSize can return many values when the element is resized; can you make it debounce the returned values, as we saw in Lesson 9, to get a new value only every 300 milliseconds?

const useElementSize = (elementRef, debounceDelayMs = 300) => {
  // This version isn't debounced :(

  const [width, setWidth] = useState(undefined)
  const [height, setHeight] = useState(undefined)

  useEffect(() => {
    const resizeObserver = new ResizeObserver((entries) => {
      for (let entry of entries) {
        if (entry.contentRect) {
          setWidth(entry.contentRect.width)
          setHeight(entry.contentRect.height)
        }
      }
    })
    resizeObserver.observe(elementRef.current)

    return () => {
      resizeObserver.disconnect()
    }
  }, [elementRef])

  return [width, height]
}

const Comp = () => {
  const div = useRef()
  const [width, height] = useElementSize(div)

  return (
    <div
      style={{
        width: 150,
        height: 100,
        resize: 'both',
        overflow: 'auto',
        border: '1px solid #191a21',
      }}
      ref={div}
    >
      {width}x{height}
    </div>
  )
}

render(Comp)
const useElementSize = (elementRef, debounceDelayMs = 300) => {
  // This version isn't debounced :(

  const [width, setWidth] = useState(undefined)
  const [height, setHeight] = useState(undefined)

  useEffect(() => {
    const resizeObserver = new ResizeObserver((entries) => {
      for (let entry of entries) {
        if (entry.contentRect) {
          setWidth(entry.contentRect.width)
          setHeight(entry.contentRect.height)
        }
      }
    })
    resizeObserver.observe(elementRef.current)

    return () => {
      resizeObserver.disconnect()
    }
  }, [elementRef])

  return [width, height]
}

const Comp = () => {
  const div = useRef()
  const [width, height] = useElementSize(div)

  return (
    <div
      style={{
        width: 150,
        height: 100,
        resize: 'both',
        overflow: 'auto',
        border: '1px solid #191a21',
      }}
      ref={div}
    >
      {width}x{height}
    </div>
  )
}

render(Comp)
Result(reset)

const useElementSize = (elementRef, debounceDelayMs = 300) => {
  const [size, setSize] = useState([undefined, undefined])
  const [debouncedSize, setDebouncedSize] = useState(size)

  const timeoutRef = useRef(null)

  useEffect(() => {
    if (!timeoutRef.current) {
      timeoutRef.current = setTimeout(() => {
        setDebouncedSize(size)
        timeoutRef.current = null
      }, 300)
    }
  }, [size])

  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current)
      }
    }
  }, [])

  useEffect(() => {
    const resizeObserver = new ResizeObserver((entries) => {
      for (let entry of entries) {
        if (entry.contentRect) {
          setSize([entry.contentRect.width, entry.contentRect.height])
        }
      }
    })
    resizeObserver.observe(elementRef.current)

    return () => {
      resizeObserver.disconnect()
    }
  }, [elementRef])

  return debouncedSize
}