title: React update state with button click using useState
body: <p>Can anyone explain to me what the "right" way is to do the below problem. I have this simple page which has event-data. Initially this is data from the last week, but there is a button on the page which sets data to all. I use useEffect() to loadData() with setting all=false initially. When I click the button, I want to update all to true and data to all data. </p>
  
  <p>The below code works, but it is somewhat weird, because I first have to get the data for !all and after that I set all=true, but then it rerenders again. </p>
  
  <p>Is there a nice way to do this? I tried putting the "onClick" code the other way around, so: setAll(!all);loadData(all), but this doesnt work, because the state isnt immediately updated.</p>
  
  <p>Any help/tips would be great!!</p>
  
  <pre><code> const Events = ({auth}) =&gt; {
  
  
  const [data, setEventData] = useState([])
  const [all, setAll] = useState(false)
  
  const loadData = async (givenScope) =&gt; {
      const scope = (givenScope ? '' : '?scope=last_week')
      const eventdata = await makeAPICall('/api/events' + scope, 'GET', null, await auth.getAccessToken())
      setEventData(eventdata);
  }
  
  useEffect(() =&gt; {
      loadData(all);
  }, [])
  
  const columns = [{
      Header: 'Datum/tijd',
      accessor: 'datetime',
      Cell: props =&gt; &lt;Moment date={props.value} tz="Europe/Amsterdam" format="YYYY-MM-DD HH:mm"/&gt;
  }, {
      Header: 'Event',
      accessor: 'value',
  }]        
  
  return &lt;div&gt;&lt;Button onClick={() =&gt; {loadData(!all);setAll(!all)}}&gt;{all ? 'Last week' : 'All'}&lt;/Button&gt; &lt;DefaultTable data={data} columns={columns} loading={data.length &gt; 0 ? false : true} /&gt;&lt;/div&gt;
  
  }
  </code></pre>