En general, ¿es mejor utilizar uno o varios ganchos useEffect en un solo componente? [cerrado]

El patrón que debe seguir depende de su caso de uso.

Primero: es posible que tenga una situación en la que necesite agregar un detector de eventos durante el montaje inicial y limpiarlos durante el desmontaje y otro caso en el que un detector en particular deba limpiarse y volverse a agregar en un cambio de accesorios.

En tal caso, useEffectes mejor usar dos diferentes para mantener la lógica relevante junta y obtener beneficios de rendimiento.

useEffect(() => {
   // adding event listeners on mount here
   return () => {
       // cleaning up the listeners here
   }
}, []);

useEffect(() => {
   // adding listeners everytime props.x changes
   return () => {
       // removing the listener when props.x changes
   }
}, [props.x])

Segundo: debe activar una llamada API o algún otro efecto secundario cuando alguno de los estados o accesorios cambie de un conjunto definido. En tal caso, useEffectsería mejor un único con las dependencias relevantes para monitorear

useEffect(() => {
    // side effect here on change of any of props.x or stateY
}, [props.x, stateY])

Tercero: necesita efectos secundarios separados para diferentes conjuntos de cambios. En tal caso, separe los efectos secundarios relevantes en diferentes useEffects

useEffect(() => {
   // some side-effect on change of props.x
}, [props.x])

useEffect(() => {
   // another side-effect on change of stateX or stateY 
}, [stateX, stateY])

Jan 02 '2019 09:01 Shubham Khatri