title: Async/await with Context Api Hooks - React
body: <p>Im using Context API to manage my app global state, and im trying to do that using hooks for the first time... and im having a little trouble with async/await, let me explain:</p>
  
  <p>This is my provider:</p>
  
  <pre><code>const JobProvider = (props) =&gt; {
         const [modalOpen, setModalOpen] = useState(false)
         const [modalJob, setModalJob] = useState({})
         const [jobs, setJobs] = useState([])
         const [searchItem, setSearchItem] = useState('')
         const [page, setPage] = useState(1)
         const [now, setNow] = useState('')
  
  
         const handleSearchChange = (e) =&gt; {
             setSearchItem(e.target.value)
         }
  
  
       const getJob = id =&gt; {
          // bla bla bla 
          return something;
         };
  
  // ... 
  
   }
  </code></pre>
  
  <p>And inside that Provider i have a function <strong>nextPage()</strong> that only updates the page number and return it after that... heres the Provider with that function:</p>
  
  <pre><code>const JobProvider = (props) =&gt; {
             const [modalOpen, setModalOpen] = useState(false)
             const [modalJob, setModalJob] = useState({})
             const [jobs, setJobs] = useState([])
             const [searchItem, setSearchItem] = useState('')
             const [page, setPage] = useState(1)
             const [now, setNow] = useState('')
  
  
             const handleSearchChange = (e) =&gt; {
                 setSearchItem(e.target.value)
             }
  
  
           const getJob = id =&gt; {
              // bla bla bla 
              return something;
             };
  
  
           async function nextPage() {
             await setPage(page + 1)
             console.log(page)
           }
  
      // ... 
  </code></pre>
  
  <p>}</p>
  
  <p>but first is logging the page and only after the state page is updated. There are any way to do this?</p>