React hook useEffect returns empty array at first

this is because they actually are empty arrays at first. Axios sends an async request to the server, fetching data. The state hooks are rendered right after the first page render, so basically at the same time. The data from the server will return when it returns. (as it is a promise). Once the data returns as a promise, you can resolve it and add the resolved data to the state.

It also seems like you're trying to set the list state twice with different data in the second useEffect. You are using the fetched data from axios first, and using the the data from the first useEffect after (allEmployees), it's kind of hard for me to really understand your thought process here.

the reason why you get the console.logs return empty on first click is because of the way useState works , when you set state you'll have to wait until the component reaload to see the new values of your state . so when you first click the state was empty so you get empty logs but on the second click you get none empty values but actually their just the new values from your first click :

const [value,setValue] = useState(0)
useEffect(()=>{        //getting list of employees who should be selected
   Axios.get(PATH + `/${list}` )
   .then((data) => {
     setValue(value+1  )
   });
  console.log(value);//this will output 1 
 },[]);

useEffect(()=>{        //getting list of employees who should be selected
    console.log(value);//this will output 2 on the next component render 
},[value]);

so in your case you can check if list and employes are not empty if so return null :

 const clicked = props.clicked;
 const [allEmployees, setAllEmployees] = useState([]);
 const [list, setList] = useState([]);

 useEffect(()=>{       //getting employees
   Axios.get(
     PATH + `/${employees}`
   ).then((data) => {
     setAllEmployees(data.data);
   });
 },[]);

useEffect(()=>{        //getting list of employees who should be selected
   Axios.get(
     PATH + `/${list}`
   ).then((data) => {
     setList(
       allEmployees.map(t=>{
         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);// <<
     console.log(list);//  <<
   });
 },[clicked]);


 if(!allEmployees.length ||  !list.length) return null 
 // after this line you're garanted that allEmployees and list are not empty 
 render <div>{list.map(your implemntation)}<div>