React Ban useEffect

¿Qué hace React Ban useEffect?

useEffect directo es una vía de escape para sincronización externa. Vive en un hook revisado y específico del dominio para un sistema externo real; los componentes se mantienen sin efectos.

Alcance

El reemplazo de efectos cambia el comportamiento afectado. La aplicación de lint en todo el repositorio es una tarea separada: aplícala cuando sea solicitado o requerido por la política existente del repositorio. Una solicitud de revisión produce hallazgos; una solicitud de implementación autoriza reemplazos dentro del alcance y verificación sin otro punto de aprobación.

Flujo de trabajo

1. Encuentra importaciones directas, llamadas de espacio de nombres React.useEffect(...) y envoltorios alrededor de useEffect en la superficie afectada.

2. Clasifica cada efecto y reemplázalo en este orden de preferencia:

   1. cálculo en tiempo de renderizado
   2. API de servidor, cargador o framework de datos
   3. la capa de estado del servidor del repositorio (por ejemplo, una fábrica de queryOptions de TanStack Query con variables en la clave y la signal pasada)
   4. manejador de eventos, acción o mutación
   5. límite de componente con clave
   6. useSyncExternalStore
   7. hook revisado específico del dominio para un sistema externo real

   Si nada encaja, indica el contrato de sincronización externa antes de mantener un efecto. Reemplazos cubre los casos no obvios.

3. Preserva el framework del repositorio, la capa de datos, la forma del lint y la política de dependencias. Añade una biblioteca solo cuando la solicitud o la política del repositorio lo autoricen; sin una capa de estado del servidor, llama al efecto restante una brecha de diseño.

4. Ejecuta lint, tipo y pruebas, más la verificación de UI o hook más pequeña y real para el comportamiento cambiado.

Efectos legítimos

Coloca cada efecto legítimo en un hook nombrado por su sistema externo (una conexión de chat, un SDK de mapas, un widget), en su propio archivo. El hook posee la configuración y limpieza, toma sus entradas reactivas como parámetros y lista cada valor que la configuración o limpieza lea, para que react-hooks/exhaustive-deps pase sin supresión. Prefiere un hook existente del repositorio.

El hook es específico para un sistema externo. Un envoltorio genérico que toma un callback y un arreglo de dependencias proporcionado por el llamante (useUpdateEffect(fn, deps), useMountEffect(fn)) es un efecto directo con otro nombre, y el estado del servidor, copias de props, acciones de usuario y reinicios con clave tienen cada uno su propio reemplazo anterior.

Aplicación

Cuando la aplicación está dentro del alcance, extiende el linter existente del repositorio para que rechace tanto las importaciones nombradas de useEffect como las llamadas React.useEffect(...). Permite solo los archivos de hook de integración revisados y nombrados, no un directorio como src/hooks/**; reporta envoltorios genéricos y sus llamantes como violaciones a migrar. Ejecuta la misma superficie de lint en la compuerta local canónica y en CI, con versiones de herramientas fijadas.

En revisión, cada nuevo efecto directo es un hallazgo a menos que el cambio documente y pruebe un límite legítimo de sistema externo. Pide un reemplazo, no ajuste del arreglo de dependencias.

Límites

• Limita las migraciones a la superficie afectada o solicitada.
• Deja useLayoutEffect, useInsertionEffect, APIs del ciclo de vida del framework y sistemas de efectos no React intactos, incluyendo en las reglas de lint, a menos que se solicite.
• Aplica primitivas de rendimiento solo para comportamiento medido o un patrón de repositorio establecido.
• Atribución ascendente: upstream.