title: Two useState in an one function and called the function in useEffect
body: <p>I need to show monthly data in a Table.</p>
  <p><strong>Expected Logic</strong></p>
  <p>User can change the month, then data should be fetched from server.</p>
  <p><strong>Problem</strong>
  I have a handleCalendar function to increase month or decrease month.
  then it use useState to set a month and year.
  after setCalendar function called in the handleCalendar,
  useEffect called by calendar variable, but sometimes it won't remove the previous remaining data .</p>
  <p><strong>My code</strong></p>
  <p>Variables</p>
  <pre><code>  const [apiData, setData] = React.useState({
      data: [],
      items: 2,
      hasMore: true,
      cursor: todayTimestamp          //to prevent to fetch overlap data.
    });
    const [calendar, setCalendar] = React.useState(null);
  
  </code></pre>
  <p>handleCalender</p>
  <pre><code>const handleCalender = (arg) =&gt; {
      let date = calendar.split(&quot;-&quot;);
      let year = Number(date[0]);
      let month = Number(date[1]);
      console.log(year, month);
  
      if (arg === &quot;add&quot;) {
        if (calendar === common.getTodayDateForm()) {
          return;
        }
        if (month === 12) {
          year = year + 1;
          month = 1;
          month = common.leadingZeros(month, 2);
          year = String(year);
          setCalendar(year + &quot;-&quot; + month);
          return;
        }
        month = month + 1;
        month = common.leadingZeros(month, 2);
        year = String(year);
        setCalendar(year + &quot;-&quot; + month);
      }
      if (arg === &quot;dec&quot;) {
        //TODO increase callender by 1
        if (month === 1) {
          year = year - 1;
          month = 12;
          month = common.leadingZeros(month, 2);
  
          year = String(year);
          setCalendar(year + &quot;-&quot; + month);
          return;
        }
        month = month - 1;
        month = common.leadingZeros(month, 2);
        year = String(year);
      }
      let lastTimeStamp = common.getTimeStamp();
  
      setData({ data: [], cursor: lastTimeStamp });
      setCalendar(year + &quot;-&quot; + month);
      return;
    }; 
  ```
  
  useEffect
  ```
  React.useEffect(() =&gt; {
      console.log(&quot;cursor in apiData1&quot;, apiData.cursor);
  
      (async () =&gt; {
        await fetchData();
      })();
      console.log(&quot;cursor in fetchData2&quot;, apiData.cursor);
  
      console.log(&quot;에이피아이&quot;, apiData);
    }, [calendar]);
  ```
  
  fetch data
  ```
    const fetchData = async () =&gt; {
      Axios.post(&quot;https://naver.com&quot;, {
        stations: [&quot;T1219071903&quot;, &quot;T1219071904&quot;],
        yearMonth: calendar,
        cursor: apiData.cursor
      }).then((a) =&gt; {
        console.log();
        let dataAdded = a.data.data.earningData;
        setData({
          data: [...apiData.data, ...dataAdded],
          pageNumber: apiData.pageNumber + 1,
          cursor: a.data.data.cursor,
          yearMonth: calendar,
          hasMore: a.data.data.hasMore
        });
      });
    };
  ```
  
  I guess that since setData is not asynchronous,
  It would not promise to setData before useEffect called by calendar.
  
  I would like to know what is the best approach to this.
  Thank you 
  
  
  </code></pre>