¿Debo usar uno o varios useEffect en el componente?

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?

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])

Debe usar múltiples efectos para separar preocupaciones como lo sugiere reactjs.org https://reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns