title: How to update react useState without delay?
body: <p>When I call <code>fetchProducts</code> I want productPage state to be updated before it runs the next line of code since the next line requires the updated state.</p>
  <p>The state only gets updated after the function has finished running. No matter where in the <code>fetchProducts</code> function I put <code>console.log(productPage)</code> it returns the state as it was before the function was called.</p>
  <pre><code>   const [productPage, setProductPage] = useState(1)
     const [displayProducts, setDisplayProducts] = useState([])
  
     const fetchProducts = async () =&gt; {
  
        setProductPage(productPage + 1) // DOES NOT UPDATE UNTIL AFTER FUNCTION RUNS
  
        const newProductsData = await fetch(`/api/getproducts?page=${productPage}`)
        const newProductsArr = await newProductsData.json()
        setDisplayProducts(displayProducts.concat(newProductsArr))
  
     }
  </code></pre>
  <p>Is this possible? I've found workarounds to the problem but it feels hacky and not ideal.</p>
  <p>I'm using next.js also, I'm not sure if that would make a difference. I can't use normal variables as they reset on each render.</p>