An example of checking on a media query with React Hooks

useMedia.jsx

function useMedia(query) {
  const [matches, setMatches] = useState(window.matchMedia(query).matches)

  useEffect(() => {
    const media = window.matchMedia(query)
    if (media.matches !== matches) {
      setMatches(media.matches)
    }
    const listener = () => {
      setMatches(media.matches)
    }
    media.addEventListener(listener)
    return () => media.removeEventListener(listener)
  }, [matches, query])

  return matches
}

// Example usage:

function SomeComponent() {
  let isWide = useMedia('(min-width: 800px)')
  
  return (<div>The window is {isWide ? 'wide' : 'not wide'}</div>)
}