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>)
}

useMediaServerFriendly.jsx

// Same thing as the other one, but more server-friendly instead of SPA stuff

function useMedia(query) {
	const [matches, setMatches] = useState(false);

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