SSR, pengujian, dan produksi

Server rendering

Nilai hook merender nilai awalnya ke markup server, dan animasi berlanjut setelah hidrasi. React 18 dan yang lebih baru memakai useId untuk nama variabel yang stabil; di server React 16 dan 17, berikan 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 stabil di React lama

Hanya diperlukan saat server rendering dengan React 16 atau 17.

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

Pembersihan yang bisa Anda andalkan

Semua yang dimiliki komponen dilepas bersamanya.

• useAnimated, useAnimatedValue, useTimeline, dan useReorder menghentikan pengendali dan listener-nya saat unmount.
• Pengendali dan input yang dideklarasikan di factory useAnimated diganti bersama saat dependensi berubah.
• Animated.Keep menghapus children yang pergi setelah geraknya, dan pose baru menginterupsi dari posisi saat ini.
• Di luar React, bind, bindOutput, createTimeline, dan createLayoutScene mengembalikan dispose yang eksplisit.

Pengujian

flushAnimatedUpdates() menerapkan keluaran tertunda secara sinkron agar test deterministik dapat memeriksa DOM.

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

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

Teks, atribut, dan properti

output(target, mapping) di dalam useAnimated memiliki keluaran gaya, atribut, teks, atau properti objek. bindOutput memasang pemetaan yang sama seketika dan mengembalikan flush dan 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} />;