title: React hooks value renders correctly but not updated inside a callback function of addEventListener
body: <p>I'm implementing infinite scroll with hooks in a functional component, I'm having an issue where I'm unable to access the updated value inside the scroll event callback function, here's my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Get a hook function
  const {useState, useEffect} = React;
  
  const initItems = ['First', 'Second','Third','Fourth','Fifth']
  
  const Example = ({title}) =&gt; {
  const [posts, setPosts] = useState({
          data: [],
          page: 1
      });
  
      console.log('FN RENDER')
  
      const handleScroll = (e) =&gt; {
  
          const { scrollHeight, scrollTop, clientHeight } = e.target
  
        
          const bottom = scrollHeight - scrollTop === clientHeight;
  
          if (bottom) {
          
              console.log('page', posts.page) // page stays 1
  
  
              const nextPage = posts.page + 1
  
               setPosts(p =&gt; ({
                    data: [...p.data, 'Append'],
                    page: p.page + 1
                }))
          }
      }
  
      useEffect(() =&gt; {
  
          console.log('USEEFFECT RENDER')
  
          setPosts(p =&gt; ({
              data: initItems,
              page: 1
          }))
          
          
  //using ScrollBox for demo, originally I'm handling the scroll event on the document: document.addEventListener            
  document.getElementById("ScrollBox").addEventListener('scroll',handleScroll);
  
          return () =&gt; document.getElementById("ScrollBox").removeEventListener('scroll', handleScroll);
      }, []);
  
  
    return (
      &lt;div&gt; 
      &lt;p&gt;Page:{posts.page}&lt;/p&gt;
      
      &lt;div id="ScrollBox" class="scroll-box"&gt;
        {
           posts.data.map(k=&gt; &lt;p&gt;{k} &lt;/p&gt;)
        }
      &lt;/div&gt;
      
      &lt;/div&gt;
      
    );
  };
  
  // Render it
  ReactDOM.render(
    &lt;Example /&gt;,
    document.getElementById("react")
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#ScrollBox{
      border:1px solid red;
      height:100px;
      overflow:auto;
      width:400px;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="react"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If you look into the console, the value of <code>page</code> stays <code>1</code> while it is rendered correctly. I used <code>useEffect</code> to attach the event. How can I get the right updated value inside <code>handleScroll</code>?</p>
  <p><strong>-- Edit --</strong></p>
  <p>How to get the updated value inside the callback of <code>addEventListener</code>? <code>#ScrollBox</code> is for the question demo, I instead need to detect scroll on <code>document</code>, which is the reason I'm using the event listener.</p>