function applyMediaQuery(selector, maxWidth) {
  const elements = document.querySelectorAll(selector);

  function updateClasses(mediaQuery) {
    elements.forEach((item) => {
      if (mediaQuery.matches) {
        item.classList.add('mobile');
      } else {
        item.classList.remove('mobile');
      }
    });
  }

  const mediaQuery = window.matchMedia(`(max-width: ${maxWidth}px)`);

  // Initial check
  updateClasses(mediaQuery);

  // Listen for changes
  mediaQuery.addEventListener('change', updateClasses);

  return elements;
}

// Usage
applyMediaQuery(".hero", 600);

import React, { useState, useEffect } from 'react';


const UseEffectCleanup = () => {
  
  const [width, setWidth] = useState(window.innerWidth);

  const checkSize = () => {
    setWidth(window.innerWidth)
  }

  useEffect(() => {

    window.addEventListener('resize', checkSize)
    return () => {
      window.removeEventListener('resize', checkSize)
    }
  }, [width]);

  return (
    <>
      <h1>Window Size</h1>
      <h2>{`${width}px`}</h2>
    </>
  );

}


export default UseEffectCleanup;