Hook that runs when dependencies changes and reruns on window resize

useResizeEffect.js

import { useLayoutEffect } from "react"

export const useResizeEffect = (effect, deps = []) => {
  // might need to wrap effect in a useCallback
  useLayoutEffect(() => {
    effect()
    window.addEventListener('resize', effect)
    return () => window.removeEventListener('resize', effect)
  }, deps)
}