State doesn't update immediately in React

Question

I know I have to use useEffect but I couldn't figure out a way to make this code to work. I want the state courses to be updated immediately every single time I'm adding a new course. The data variable in the getCourses function is updated, but the update of the state doesn't happen immediately.

function CourseList() {
const [courses, setCourses] = useState([]);
const [idProf, setIdProf] = useState();

this function gets the list of courses from the database and store it in courses

const getCourses = async () =>{
    const response = await fetch(`${SERVER}/api/courses`);
    const data = await response.json();
    setCourses(data);
    // -> here setCourses doesnt update the state, but data has the updated array of courses
}

this function adds a course and then adds the professor stored in idProf to this course

const addCourse = async(course) => {

    //...fetch with post method...//

    getCourses(); // here i call the method but when I'm trying to add the professor to the course on the next line, the state isn't updated yet
    addStudentCourse(idProf, course.cod);
}

I tried to use useEffect but it s updating the state only one time

useEffect(()=>{
    getCourses();
},[]);

the courses are not updated when this function is running

const addStudentCourse = async(idStudent,codCourse)=>{
    let id = -1;
    //searching for the id in courses
    for(let c of courses){
        if(c.cod == codCourse){
            id = c.id;
        }
    }
    console.log(id)// id is still -1, it cant find the course because the state wasnt updated yet
    if(id != -1){
        //..adding to the database..//
    }
}
return (<div></div>)

}

Answer 1

Your getCourses funciton is async, but you are not awaiting it. Try await getCourses() .