title: React hooks value is not accessible in event listener function
body: <p>I decided to use React hooks for my component using windom width and resize event listener. The problem is that I can't access current value that I need. I get nested value that was set while adding event listener.</p>
  
  <p>Passing function to value setter function is not a solution for me because it's forcing render and breaking my other functionalities.</p>
  
  <p>I am attaching minimalistic example to present core problem:</p>
  
  <pre><code>import React, { Component, useState, useEffect } from 'react';
  import { render } from 'react-dom';
  
  const App = () =&gt; {
    const [width, setWidth] = useState(0);
  
    const resize = () =&gt; {
      console.log("width:", width); // it's always 0 even after many updates
      setWidth(window.innerWidth);
    };
  
    useEffect(() =&gt; {
      resize();
      window.addEventListener("resize", resize);
      return () =&gt; window.removeEventListener("resize", resize);
    }, []);
  
    return &lt;div&gt;{width}&lt;/div&gt;;
  }
  
  render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/react-krswmq" rel="noreferrer">LIVE DEMO IS HERE</a></p>
  
  <p>Please for help.</p>