SSR, test e produzione

Rendering sul server

I valori degli hook renderizzano il loro valore iniziale nel markup del server, e l’animazione prosegue dopo l’idratazione. React 18 e successivi usano useId per nomi di variabile stabili; sui server con React 16 e 17, passa 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>
  );
}

id stabili con React meno recenti

Serve solo con il rendering sul server in React 16 o 17.

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

Una pulizia su cui contare

Tutto ciò che un componente possiede viene rilasciato insieme a lui.

• useAnimated, useAnimatedValue, useTimeline e useReorder fermano i loro controller e listener allo smontaggio.
• Controller e input dichiarati in una factory di useAnimated vengono sostituiti insieme quando cambia una dipendenza.
• Animated.Keep rimuove i figli in uscita dopo il loro movimento, e una nuova pose interrompe a partire dalla posizione attuale.
• Fuori da React, bind, bindOutput, createTimeline e createLayoutScene restituiscono un dispose esplicito.

Test

flushAnimatedUpdates() applica in modo sincrono l’output in sospeso, così i test deterministici possono fare asserzioni sul DOM.

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

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

Testo, attributi e proprietà

output(target, mapping) dentro useAnimated possiede un output di stile, attributo, testo o proprietà di un oggetto. bindOutput collega subito la stessa mappatura e restituisce 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} />;