title: React hook useEffect returns empty array at first
body: <p>I get the data from my database like so:</p>
  <pre><code> const clicked = props.clicked;
   const [allEmployees, setAllEmployees] = useState([]);
   const [list, setList] = useState([]);
  
   useEffect(()=&gt;{       //getting employees
     Axios.get(
       PATH + `/${employees}`
     ).then((data) =&gt; {
       setAllEmployees(data.data);
     });
   },[]);
  
  useEffect(()=&gt;{        //getting list of employees who should be selected
     Axios.get(
       PATH + `/${list}`
     ).then((data) =&gt; {
       setList(data.data);
  
       setList(
         allEmployees.map(t=&gt;{
           if(list.includes(t.id)){
             return{
               select: true,
               id: t.id,
               name: t.name
             }
           }else{
             return{
               select: false,
               id: t.id,
               name: t.name
             }
           }
         })
       )
       console.log(allEmployees);// &lt;&lt;
       console.log(list);//  &lt;&lt;
     });
   },[clicked]);
  </code></pre>
  <p>My problem is that the fist time I click on the buttons, activating <strong>clicked.props</strong>, both <strong>console.log()</strong> show empty arrays. After the second click and on, they work and show the arrays. I'm guessing I need to update them in a better way, but don't know how. (I'm trying to show the data but it really shows nothing on the first click of the button).</p>