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?
Respuestas:
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 useEffect
con 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])
useEffect
llamadas.
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
[]
(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. ¿UtilizauseEffects
el código separado y compartido en una función que cada uno llama por separado?