Sometimes, you want to render a different React tree depending on the viewport. You can just apply media queries to the
divs and use
display: none;, but this will still render to the DOM and mount any required components. Using hooks and the
window.matchMedia method, we can dictate whether or not the components are rendered using standard CSS media query syntax.
This hook takes a CSS media query string and returns a boolean value depending on whether or not the media query currently applies. The value will be automatically updated as the user resizes their browser window.