Básicamente, cada vez que realizo una operación en mi base de datos (sqlite3), no aparece inmediatamente en la página, pero tengo que hacer clic en algún otro componente para actualizar o tengo que actualizar la página/restablecer el servidor

Este es el fragmento que utilizo bastante en cada componente de la página:

 const fetchData= async()=>{ let updatedVector= await API.getUpdate(); for (let i = 0;i<props.courses.length;i++){ for (let j=0;j<updatedVector.length;j++){ if(props.courses[i].code===updatedVector[j].code){ props.courses[i].current= await API.getSpecificData(props.courses[i].code); } } } } // useEffect(()=>{ fetchData(); },[fetchData])

Se actualiza en la base de datos, pero tarda un tiempo en actualizarse en el componente, ¿hay alguna forma de actualizar de forma inmediata? O tengo que actualizar la aplicación.

EDITAR: también pasé setState, pero aún así tengo que hacer clic al menos dos veces en el enlace del componente y luego tengo mi actualización:

 //get updates useEffect(()=>{ console.log("triggered") const fetchData= async()=>{ let updatedVector= await API.getUpdate(); for (let i = 0;i<props.courses.length;i++){ for (let j=0;j<updatedVector.length;j++){ if(props.courses[i].code===updatedVector[j].code){ props.courses[i].current= await API.getSpecificData(props.courses[i].code); } } } props.setCourses(props.courses) } fetchData(); },[fetchData])