SSR, testes e produção

Renderização no servidor

Os valores de hook renderizam o valor inicial na marcação do servidor, e a animação continua depois da hidratação. React 18 ou superior usa useId para nomes de variável estáveis; em servidores com React 16 e 17, passe um 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 estáveis em React antigo

Necessário só ao renderizar no servidor com React 16 ou 17.

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

Limpeza em que você pode confiar

Tudo o que um componente possui é liberado junto com ele.

• useAnimated, useAnimatedValue, useTimeline e useReorder param seus controladores e listeners na desmontagem.
• Controladores e entradas declarados em uma factory de useAnimated são substituídos juntos quando uma dependência muda.
• Animated.Keep remove os filhos que saem depois do movimento, e uma pose nova interrompe a partir da posição atual.
• Fora do React, bind, bindOutput, createTimeline e createLayoutScene retornam um dispose explícito.

Testes

flushAnimatedUpdates() aplica a saída pendente de forma síncrona, para que testes determinísticos possam verificar o DOM.

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

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

Texto, atributos e propriedades

output(target, mapping) dentro de useAnimated controla uma saída de style, atributo, texto ou propriedade de objeto. bindOutput conecta o mesmo mapeamento na hora e retorna flush e 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} />;