SSR, тести й продакшн

Рендеринг на сервері

Значення хуків рендерять своє початкове значення в серверну розмітку, і анімація продовжується після гідратації. React 18 і новіші використовують useId для стабільних назв змінних; на серверах із React 16 і 17 передайте 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>
  );
}

Стабільні id у старших версіях React

Потрібно лише під час рендерингу на сервері з React 16 чи 17.

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

Очищення, на яке можна покластися

Усе, чим володіє компонент, звільняється разом із ним.

• useAnimated, useAnimatedValue, useTimeline і useReorder зупиняють свої контролери й слухачі під час демонтування.
• Контролери й введення, оголошені у фабриці useAnimated, замінюються разом, коли змінюється залежність.
• Animated.Keep видаляє дочірні елементи, що йдуть, після їхнього руху, а нова поза перериває рух із поточної позиції.
• Поза React bind, bindOutput, createTimeline і createLayoutScene повертають явний dispose.

Тестування

flushAnimatedUpdates() синхронно застосовує незавершений вивід, щоб детерміновані тести могли перевіряти DOM.

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

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

Текст, атрибути й властивості

output(target, mapping) усередині useAnimated володіє виводом у стиль, атрибут, текст чи властивість об’єкта. bindOutput одразу підключає те саме зіставлення й повертає flush і 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} />;