为什么反应中的匹配媒体无法正常工作？

Question

Hey friends help me please,

I am testing a media query in JavaScript and it doesn't work properly. The condition is met with a measure before, for example:

If it is min-with: 992px , the condition is met when the screen exceeds the width of 893px.

Why does this happen? Working in vanilla JavaScript if it works perfectly.

CODE

const mql = window.matchMedia("(min-width: 992px)");
   
    useEffect(() => {
      
        mql.addEventListener("change", resize);
        function resize(e) {
            if (e.matches) { // If media query matches
             
                console.log(window.screen.width);
               
            }
        }
        return () => {
            mql.removeEventListener("change", resize);
        }
    },[mql]);

CAPTURE

Answer 1

This works. Tested

  useEffect(() => {
      const mql = window.matchMedia("(min-width: 992px)");
      mql.addEventListener("change", resize);
      function resize(e) {
          if (e.matches) { // If media query matches
              console.log("more than 992");
          } else {
             console.log("less than 992")
          }
      }
      return () => {
          mql.removeEventListener("change", resize);
      }
  },[]);