← Alle AufgabenReact · Middle

Hook usePrevious

Schreib einen Hook usePrevious(value), der den value aus dem vorherigen Render liefert. Beim ersten Render gibt es noch keinen vorherigen Wert, liefere also undefined.

Dieser Hook hilft, eine Prop mit ihrem alten Wert zu vergleichen, etwa um eine sich ändernde Zahl zu animieren.

function usePrevious(value) {
  // ...
}

Strg+Enter führt die Tests aus. Tab rückt ein; um den Editor per Tastatur zu verlassen, drücke Esc und dann Tab. Der Code wird in diesem Browser gespeichert.

Tests (3)

const { result } = renderHook(({ v }) => usePrevious(v), { initialProps: { v: 1 } });
expect(result.current).toBe(undefined);

const { result, rerender } = renderHook(({ v }) => usePrevious(v), { initialProps: { v: 1 } });
rerender({ v: 2 });
expect(result.current).toBe(1);

const { result, rerender } = renderHook(({ v }) => usePrevious(v), { initialProps: { v: 'a' } });
rerender({ v: 'b' });
rerender({ v: 'c' });
expect(result.current).toBe('b');