¿Debo usar uno o varios useEffect en el componente?

102

Tengo algunos efectos secundarios que aplicar y quiero saber cómo organizarlos:

  • como un solo uso Efecto
  • o varios efectos de uso

¿Qué es mejor en términos de rendimiento y arquitectura?

Vadim
fuente

Respuestas:

159

El patrón que debe seguir depende de su useCase.

Primero , es posible que tenga una situación en la que necesite agregar un detector de eventos durante el montaje inicial y limpiarlos en el desmontaje y otro caso en el que un detector en particular debe limpiarse y volver a agregarse en un cambio de prop. En tal caso, usar dos useEffect diferentes es mejor para mantener la lógica relevante junta además de tener 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: puede haber un caso en el que necesite activar una llamada a la API o algún otro efecto secundario cuando cualquiera de los estados o accesorios cambie entre un conjunto. En tal caso, una sola useEffectcon los valores relevantes para monitorear debería ser una buena idea

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

Tercero: un tercer caso en el que necesita tomar diferentes acciones para cambiar diferentes valores. En tal caso, separe las comparaciones relevantes en diferentesuseEffects

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

useEffect(() => {
   // another side-effect on change of stateX or stateY 
}, [stateX, stateY])
Shubham Khatri
fuente
¿qué pasa con un término medio entre el segundo y el tercer ejemplo anterior?: ¿Tiene lógica que se ejecuta cuando cambia un subconjunto de estado / accesorios, pero cada uno tiene una lógica separada que debe ejecutarse además de algún código común que debe ejecutarse? No usaría [](porque todavía es solo un subconjunto de estados / accesorios para los que está esperando cambios) pero también le gustaría reutilizar el código. ¿Utiliza useEffectsel código separado y compartido en una función que cada uno llama por separado?
ecoe
Como sugiere la respuesta a continuación, el equipo de React sugiere separar los ganchos por preocupación, por lo que lo dividiría en varias useEffectllamadas.
hakazvaka
28
Me gusta cómo escribiste useCase.
VerticalGrain
¿Se activan siempre en el orden de su definición? es decir, el efecto1 siempre se llama primero, luego el efecto2?
Computrius