Tengo algunas preguntas mientras trabajo con React.js. Digamos que tenemos esos useEffect s que tienen las mismas dependencias dentro de algunos a.jsx :
// a.jsx const Main = () => { useEffect(() => { console.log(1); }, []); useEffect(() => { console.log(2); }, []); return <p>asdf</p> } En un b.jsx , he reunido funciones para tener un useEffect , como a continuación:
//b.jsx const Main = () => { useEffect(() => { console.log(1); console.log(2); }, []); return <p>asdf</p> }¿Cuál es el diferente? ¿Cuál es la mejor práctica?
Tener muchos useEffect s no es un problema, pero para la mantenibilidad, si es posible, tener uno es la mejor opción. Sin embargo, en algunos casos no puede, por ejemplo, si tiene diferentes lógicas para ejecutar o diferentes dependencias como esta:
const Main = () => { // this one runs one time when the component mounts the first time useEffect(() => { console.log(1); }, []); // this one runs every time someVarible changes and when the component mounts the first time useEffect(() => { console.log(2); }, [someVariable]); return <p>asdf</p> }Las mejores prácticas son aquellas que:
Este último creo que es aplicable aquí. Un useEffect con una matriz de dependencias vacía es aproximadamente equivalente al ciclo de vida del componentDidMount . Un componente solo se puede montar una vez por montaje, por lo que puede reducir ( no repetir ) el código colocando toda la lógica de montaje en un solo gancho useEffect de montaje.
// b useEffect(() => { console.log(1); console.log(2); }, []);Si alguna lógica tiene las mismas dependencias más adelante durante las renderizaciones, entonces, lógicamente, aún tiene sentido colocarlas en un solo gancho de efecto.
// b useEffect(() => { console.log(1); console.log(2); }, [depA, depB]);Incluso si tienen las mismas dependencias pero desea llamar condicionalmente a algunas funciones internamente, tiene sentido colocarlas en un solo gancho de efecto.
// b useEffect(() => { console.log(1); if (depB) { console.log(2); } }, [depA, depB]);Es cuando las dependencias son diferentes que querrás usar efectos separados.
// a useEffect(() => { console.log(1); }, [depA]); // b.jsx useEffect(() => { if (depC) { console.log(1); } console.log(2); }, [depB, depC]);