React hook for reducing the amount of ref event bindings

useCachedRefHandler.js

import { useRef, useEffect } from 'react'

/**
 * This hook reduces the amount of rebindings.
 * Use it when your props change a lot.
 *
 * @param {DomRef} targetRef The reference to the dom node
 * @param {String} eventName The eventName you want to bind
 * @param {Function} handler The actual event handler
 */
function useCachedRefHandler (targetRef, eventName, handler) {
  const savedHandler = useRef()

  useEffect(() => {
    savedHandler.current = handler
  }, [handler])

  useEffect(() => {
    const internalHandler = (...args) => {
      if (savedHandler.current) {
        savedHandler.current(...args)
      }
    }
    targetRef.current.addEventListener(eventName, internalHandler)
    return () => targetRef.current.removeEventListener(eventName, internalHandler)
  }, [])
}

export default useCachedRefHandler