Mejores prácticas de bibliotecas React

Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.

1. Devuelve toDataStreamResponse: Un manejador de ruta de AI SDK debe devolver result.toDataStreamResponse() (no result.text o NextResponse.json); de lo contrario, envías un blob JSON de respuesta completa y la UI de transmisión useChat nunca se actualiza token-por-token.
2. Establece maxSteps para llamadas de herramientas: Las herramientas definidas sin maxSteps predeterminan a un solo paso, por lo que el modelo puede llamar a una herramienta pero nunca ver su resultado y la conversación se detiene — aumenta a la máxima profundidad de razonamiento que realmente deseas.
3. Usa generateObject con Zod: Para salida estructurada, generateObject({ schema }) con un esquema Zod impone la forma en la capa SDK; solicitar JSON y análisis manual es frágil y desperdicia tokens en instrucciones de formato.
4. Codifica la carga útil de Lambda como Uint8Array: InvokeCommand rechaza objetos simples en tiempo de ejecución — envuelve con new TextEncoder().encode(JSON.stringify(payload)) y decodifica la respuesta simétricamente, respetando los límites de carga útil de 6 MB sincrónico / 256 KB asincrónico.
5. Verifica FunctionError, no Catch: Los errores en tiempo de ejecución de Lambda llegan como un campo FunctionError en la respuesta, no como una excepción lanzada, por lo que inspecciona el sobre de respuesta — las invocaciones asincrónicas (Event) descartan errores silenciosamente a menos que configures un DLQ.
6. Ten en cuenta los límites de caracteres de Polly: El motor neural se limita a 3.000 caracteres por solicitud y el motor estándar a 6.000, así que divide texto largo en límites de oración y verifica soporte neural con DescribeVoicesCommand antes de cambiar voces.
7. Envuelve SSML en speak y escapa: La entrada SSML requiere TextType: "ssml" y debe ser XML válido dentro de <speak>...</speak> con &, <, > escapados; también evita salida pcm para navegadores ya que es audio crudo — usa mp3 u ogg_vorbis.
8. Carga a S3 mediante PUT prefirmado: Genera una URL prefirmada en el servidor y permite que el navegador PUT directamente a S3 para que las cargas grandes eviten el límite de cuerpo de solicitud de Next.js (1 MB predeterminado) y nunca toquen el ancho de banda del servidor.
9. Configura CORS de bucket para PUT: Las cargas de navegador a S3 requieren reglas CORS explícitas de bucket que enumeren tu origen, el método PUT y el encabezado Content-Type — y siempre establece ContentType en el comando prefirmado para que el objeto no se guarde como application/octet-stream.
10. Mantén los SDKs de AWS solo en el servidor: Nunca importes @aws-sdk/client-s3, client-lambda o client-polly desde un archivo "use client" — las credenciales terminan en el bundle del navegador y AWS SDK v3 hincha el JS del cliente; usa Server Actions o Route Handlers.
11. Usa parseISO, no new Date: new Date("2026-04-06") analiza cadenas ISO de solo fecha como medianoche UTC y se desplaza visiblemente en zonas no UTC, por lo que prefiere parseISO (más date-fns-tz para trabajo consciente de zona) para evitar errores silenciosos de un día fuera.
12. Ten en cuenta MM vs mm tokens de formato: date-fns sigue Unicode TR#35, donde MM es mes, mm es minutos y DD es inválido (usa dd) — los errores de caso se compilan correctamente y producen cadenas silenciosamente incorrectas.
13. Formatea fechas en el cliente: Las fechas formateadas renderizadas en el servidor causan desincronización de hidratación siempre que la zona horaria del servidor difiera de la del cliente, así que formatea en un Componente Cliente después del montaje o pasa la marca de tiempo sin procesar y formatea en el navegador.
14. Envuelve elementos de arrastre en DragOverlay: DragOverlay renderiza la vista previa de arrastre fuera del flujo del DOM y soluciona el problema de "salto de elementos" cuando el espacio original se colapsa; combina con opacidad reducida en el original para una visual estable.
15. Requiere movimiento del puntero para comenzar el arrastre: Añade activationConstraint: { distance: 8 } (o un retraso) a PointerSensor para que un solo clic no inicie un arrastre; sin esto, cada clic en un elemento ordenable desencadena arrastres accidentales.
16. IDs dnd-kit únicos globalmente: dnd-kit identifica elementos solo por ID en todos los contenedores, por lo que IDs duplicados en columnas rompen descargas de múltiples contenedores — usa UUIDs o claves prefijadas por contenedor en lugar de índices por lista.
17. Importa desde lodash-es: Usa importaciones nombradas desde lodash-es para que el empaquetador tree-shake las utilidades sin usar; import _ from "lodash" trae toda la construcción CJS de ~70 KB incluso para un solo ayudante.
18. Memoiza la creación de debounce: Crear debounce(fn, 300) en línea en render devuelve una instancia nueva cada renderizado y nunca acumula llamadas; envuelve la creación en useMemo/useCallback y llama a .cancel() en la limpieza useEffect para que las invocaciones pendientes no se disparen después del desmontaje.
19. Pasa un objetivo nuevo a merge: El merge(target, source) de Lodash muta su primer argumento, así que siempre pasa un nuevo {} (o cloneDeep primero) como objetivo; también prefiere structuredClone nativo sobre cloneDeep a menos que necesites soporte de función o instancia de clase.
20. Genera un AUTH_SECRET de 32+ caracteres: Auth.js falla en producción sin AUTH_SECRET y los secretos débiles comprometen cada sesión — genera uno con npx auth secret y usa valores distintos por entorno para que una clave de desarrollo filtrada nunca comprometa prod.
21. El proveedor de credenciales es solo JWT: El proveedor de credenciales no puede usar sesiones de base de datos incluso con un adaptador instalado, y extender tipos de sesión requiere tanto el par de callback jwt/session como una ampliación de módulo en types/next-auth.d.ts o TypeScript se desvía del tiempo de ejecución.
22. Usa un Prisma Client Singleton: En desarrollo, adjunta el cliente Prisma a globalThis para que la recarga de módulo en caliente no abra un nuevo pool de conexiones en cada guardado — sin esto la base de datos rápidamente rechaza conexiones y el servidor de desarrollo parece colgarse.
23. Convierte BigInt antes de la serialización: Los campos BigInt de Prisma no pueden cruzar el límite Servidor→Cliente a través de JSON, así que mapéalos a Number o String antes de pasar a Componentes Cliente, y selecciona solo las relaciones que necesitas (con include/select) para evitar consultas N+1.
24. QueryClient vive en useState: Construye el QueryClient de TanStack Query dentro de useState(() => new QueryClient()) dentro de un proveedor cliente; un cliente a nivel de módulo en un Server Component filtra el estado de caché entre solicitudes de usuario y filtra datos entre usuarios.
25. Entiende staleTime vs gcTime: staleTime controla cuándo se considera que los datos son frescos y si ocurren refetches; gcTime controla cuánto tiempo las consultas inactivas permanecen en la caché — staleTime: Infinity aún permite la recolección de basura, y las mutaciones nunca auto-invalidan consultas relacionadas sin invalidateQueries explícito.