Debounced media query HOC to allow users to render components based on screen width

media-hoc.js

import React from 'react'
import { debounce } from '../../utils'

const withMedia = Component => props => {
  const [width, setWidth] = React.useState(window.innerWidth)

  const toggleMedia = debounce(() => {
    setWidth(window.innerWidth)
  }, 250)

  React.useEffect(() => {
    // Add event listener on mount
    window.addEventListener('resize', toggleMedia)

    // Cleanup on unmount
    return () => window.removeEventListener('resize', toggleMedia)
  }, [])

  return <Component {...props} media={width} />
}

export default withMedia