SSR, pruebas y producción

Renderizado en servidor

Los valores de hook renderizan su valor inicial en el marcado del servidor, y la animación continúa tras la hidratación. React 18 y posteriores usan useId para nombres de variable estables; en servidores con React 16 y 17, pasa un id.

import { AnimatedProvider } from '@kkwaenggwari/animated';

// The package entry is marked 'use client'. A server layout can render the
// provider directly; hooks and Animated.<tag> go inside Client Components.
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AnimatedProvider>{children}</AnimatedProvider>
      </body>
    </html>
  );
}

ids estables en React antiguo

Solo hace falta al renderizar en servidor con React 16 o 17.

// React 18+ uses useId automatically. On React 16/17 servers, pass a stable id.
const progress = useAnimatedValue(0, { id: 'hero-progress' });

Limpieza en la que puedes confiar

Todo lo que pertenece a un componente se libera con él.

• useAnimated, useAnimatedValue, useTimeline y useReorder detienen sus controladores y listeners al desmontar.
• Los controladores y entradas declarados en una factoría de useAnimated se reemplazan juntos cuando cambia una dependencia.
• Animated.Keep elimina a los hijos que salen tras su movimiento, y una pose nueva interrumpe desde la posición actual.
• Fuera de React, bind, bindOutput, createTimeline y createLayoutScene devuelven un dispose explícito.

Pruebas

flushAnimatedUpdates() aplica de forma síncrona la salida pendiente para que las pruebas deterministas puedan comprobar el DOM.

import { flushAnimatedUpdates } from '@kkwaenggwari/animated';

act(() => progress.setValue(0.5));
flushAnimatedUpdates();
// Pending style writes are applied now; assert on the DOM.

Texto, atributos y propiedades

output(target, mapping) dentro de useAnimated gestiona una salida de style, atributo, texto o propiedad de objeto. bindOutput conecta el mismo mapeo de inmediato y devuelve flush y dispose.

const label = useRef(null);

const count = useAnimated(
  0,
  (value) => {
    output(label, { text: new AnimatedComputed([value], (v) => `${Math.round(v * 100)}%`) });
    timing(value, { toValue: 1, duration: 1200 });
  },
  [],
);

<span ref={label} />;