SSR, tests et production

Rendu serveur

Les valeurs de hook rendent leur valeur initiale dans le balisage serveur, et l’animation continue après l’hydratation. React 18 et versions ultérieures utilisent useId pour des noms de variables stables ; sur un serveur React 16 ou 17, passez 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>
  );
}

Des ids stables sur les anciennes versions de React

Nécessaire uniquement pour le rendu serveur avec 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' });

Un nettoyage sur lequel compter

Tout ce qu’un composant possède est libéré avec lui.

• useAnimated, useAnimatedValue, useTimeline et useReorder arrêtent leurs contrôleurs et listeners au démontage.
• Les contrôleurs et entrées déclarés dans une factory useAnimated sont remplacés ensemble quand une dépendance change.
• Animated.Keep retire les enfants sortants après leur mouvement, et une nouvelle pose interrompt depuis la position actuelle.
• En dehors de React, bind, bindOutput, createTimeline et createLayoutScene renvoient un dispose explicite.

Tests

flushAnimatedUpdates() applique la sortie en attente de façon synchrone, pour que des tests déterministes puissent vérifier le DOM.

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

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

Texte, attributs et propriétés

output(target, mapping) dans useAnimated gère une sortie de style, d’attribut, de texte ou de propriété d’objet. bindOutput attache immédiatement le même mapping et renvoie flush et 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} />;