title: React updating state only after second click
body: <p>I am trying to build a react app and have run into a bug I can't seem to fix. I have a context file with a <code>days</code> variable in it and a <code>data</code> object that depends on number of days. it looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>const DataContext = createContext({ days: 720, data: { timestamp: [], price: [], short_ma: [], long_ma: [], money: [], action: [] }, daysChangeHandler: (newDays) =&gt; { } })
  export default DataContext
  
  export const DataContextProvider = (props) =&gt; {
      const daysChangeHandler = (newDays) =&gt; {
          setDays(newDays, getNewData())
  
      }
      const getNewData = () =&gt; {
          getData(days).then(response =&gt; setData(response))
          console.log('NEW DATA')
      }
  
      const [days, setDays] = useState(720)
      const [data, setData] = useState({ timestamp: [], price: [], short_ma: [], long_ma: [], money: [], action: [] })
  
      return &lt;DataContext.Provider
          value={{ days: days, data: data, daysChangeHandler: daysChangeHandler }}&gt;
          {props.children}
      &lt;/DataContext.Provider&gt;
  
  
  }
  </code></pre>
  <p><code>getData</code> triggers a call to a database and gets the data back, it works I tested it.</p>
  <p>The app is wrapped in the <code>dataContextProvider</code>.</p>
  <p>When a button is clicked, it looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>export default function NumberOfDays(props) {
  
  const context = useContext(DataContext)
  
      const predefinedDaysHandler = (days) =&gt; {
  
          context.daysChangeHandler(days)
  }
  return &lt;button className='submit-button' onClick={() =&gt; predefinedDaysHandler(0)}&gt;Max&lt;/button&gt;
  }
  </code></pre>
  <p>Finally, this should be displayed in a rendered component looking like this:</p>
  <pre class="lang-js prettyprint-override"><code>export default function DataChart(props) {
      const context = useContext(DataContext)
      
  console.log(context.data)
  return //rendered data here, the updated data should be displayed but is only on the second time I click the submit button
  }
  </code></pre>
  <p>The problem is that I have to click twice on the submit button to get the updated data value?</p>
  <p>I have tried using <code>useEffect</code> in the <code>DataContextProvider</code>:</p>
  <pre class="lang-js prettyprint-override"><code>useEffect(()=&gt;{
  getNewData(days)
  }, [days])
  </code></pre>
  <p>But it changes nothing.</p>
  <p>Also, when I press the submit button the first time, the <code>console.log('NEW DATA')</code> gets triggered, but the data somehow does not get updated in the component that should display my data before the second click.</p>
  <p>To be really clear, the data that is displayed is always the data from just before the last update. How do I change this?</p>
  <h1>EDIT</h1>
  <p>Tried to replace <code>daysChangeHandler</code> with:</p>
  <pre class="lang-js prettyprint-override"><code>const daysChangeHandler = (newDays) =&gt; {
          setDays(newDays)
          getNewData()
      }
  </code></pre>
  <p>but it doesn't change anything.</p>