Tengo un useEffect, que funciona correctamente cuando se hace así.
async function readUserPosts(profileID){ try { const res = await axios.post(...); setUserPosts(res.data.posts); } catch (err) { console.error(err); } } useEffect(() => { readUserPosts(profileID); }, [profileID])Pero, si defino el mismo useEffect agregando una segunda función como esta:
async function readUserPosts(profileID){ try { const res = await axios.post(...); setUserPosts(res.data.posts); } catch (err) { console.error(err); } } useEffect(() => { readUserPosts(profileID); functionX(); }, [profileID])El useEffect funciona las primeras veces que vuelvo a cargar la página, después de lo cual deja de funcionar. No recibo ningún mensaje de error, incluso cuando envuelvo el try catch alrededor de las 2 funciones. FunctionX es una función asíncrona simple. He sustituido otras funciones de prueba en functionX y produce el mismo resultado. Básicamente, no funcionará cuando se defina una segunda función. ¿Qué salió mal?
Encierre los dos métodos con useCallback. Aquí hay un método, por ejemplo:
const readUserPosts = useCallback(async function() { try { const res = await axios.post(...); setUserPosts(res.data.posts); } catch (err) { console.error(err); } }, []);E intente agregar una dependencia como esta:
useEffect(() => { readUserPosts(profileID); functionX(); }, [profileID, readUserPosts, functionX])