Estoy trabajando en un proyecto con muchos antipatrones, y lo que vi es IIFE en torno a múltiples efectos de uso, esto es lo que tengo:
condition && (() => { useEffect(() => { const calOffsetTimeout = setTimeout(() => { calcOffsetWidth(); }, 150); return () => { clearTimeout(calOffsetTimeout); }; }, [menuWidth.isExpanded, pdfWrapperRef.current]); useEffect(() => { calcOffsetWidth(); }, [pdfWrapperRef, desiredScale, zooming]); useEffect(() => { calcOffsetWidth(); return () => pdf && pdf.destroy(); }, [pdf]); useEffect(() => { window.addEventListener('resize', calcOffsetWidth); return () => { window.removeEventListener('resize', calcOffsetWidth); }; }, []); })();Está funcionando, pero la desventaja es que no puedo depurar nada dentro de esta función de vida. Me gustaría saber qué tan malo o bueno es envolver la lógica (especialmente los ganchos) en iife. Lo que he intentado es agregar condiciones dentro de los arreglos deps, pero hay demasiada lógica en el proyecto y todo deja de funcionar, por lo que no es la decisión correcta.
Intento responder a esto lo más que puedo, tengan paciencia conmigo.
Técnicamente, puede usar un IIFE alrededor de cualquier llamada de gancho. Entonces, desde el punto de vista de la corrección , el IIFE no plantea un problema, pero la condition frente a él sí. Esta es la razón de esto: todos los hooks originales de React useEffect , useState , useRef , etc. están conectados internamente a alguna contabilidad de React que depende absolutamente del número y el orden de las llamadas de hook que ocurren durante la ejecución de una función de representación específica; adivina cómo React puede diferenciar entre tu estado foo y tu estado de bar en const [foo] = useState(); const [bar] = useState(); ? Fácil: el estado de ambas llamadas de enlace se mantiene en una matriz; la primera llamada obtiene el primer espacio, la segunda llamada obtiene el segundo espacio, y así sucesivamente. Entonces, cuando su condición cambia durante el tiempo de ejecución de verdadero a falso y tiene otras llamadas useEffect después de su expresión protegida condicionalmente, se asociarán con las ranuras que se crearon originalmente para useEffect dentro de la expresión. Violencia. Entonces, ¿qué pasa con los ganchos personalizados? Bueno, al final se basan en ganchos React originales, por lo que se aplican las mismas reglas.
Entonces, ¿por qué es posible un IIFE? Técnicamente, su IIFE es solo un gancho personalizado anónimo. Qué es un gancho personalizado: puede definir una función que use ganchos internamente y usar su nueva función como usaría cualquier gancho original de React. Por convención, los ganchos se denominan useXXX pero eso es solo una convención y puede crear un gancho como una función anónima si lo desea.
¿Es una mala práctica hacerlo? Sí. Es confuso y no aporta nada útil a la mesa. Si desea separar algunas llamadas de enlace, simplemente conviértalo en un enlace personalizado, asígnele un nombre significativo, puede usar argumentos de entrada y devolver valores como desee.