ガイド · 09

SSR、テスト、本番運用

サーバーレンダリング、ハイドレーション、テスト、そして頼れる後片付けのルール。

サーバーレンダリング

フックの値は初期値をサーバーのマークアップに書き出し、ハイドレーション後もアニメーションを続けます。React 18 以降は安定した変数名に useId を使います。React 16 と 17 のサーバーでは id を渡してください。

app/layout.jsx

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>
  );
}

古い React での安定した id

React 16 または 17 でサーバーレンダリングするときだけ必要です。

ssr.jsx

// 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 を検証できます。

Meter.test.jsx

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

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

テキスト、属性、プロパティ

useAnimated の中の output(target, mapping) は、style、属性、テキスト、オブジェクトのプロパティへの出力を所有します。bindOutput は同じマッピングをすぐに取り付け、flush と dispose を返します。

Counter.jsx

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} />;