Rerendering a component using useState - ReactJS, Axios

Question

When the conditional rendering is triggered I would like to rerender the component. I figure the best option is using useState.

  const canBookSlot = (id) => {
    if (userDetailsObj.canBook != 0) {
      Axios.post("http://localhost:3001/api/book/week1/ex", {
        room: userDetailsObj.room,
        id: id.id + 1,
      });
      setSlotsList(...slotsList); //This doesn't work
      console.log("booked");
    }
 };

After the Axios method the database is updated and therefore the setSlotList should be updated? I thought this was the purpose of useEffect:

 const [slotsList, setSlotsList] = useState([]);

    useEffect(() => {
    Axios.post("http://localhost:3001/api/get/week1/ex").then((response) => {
      setSlotsList(response.data);
    });
}, []);¨

Answer 1

in first snippet

Axios.post("http://localhost:3001/api/book/week1/ex", {
        room: userDetailsObj.room,
        id: id.id + 1,
      });

is async funntion, you should add await before it or handle through .then() then setSlotsList(...slotsList); will rerender component after resolve that promise. Second thing is in you next snippet: useEffect with empty deps will trigger only once - when component did mount.