← Wszystkie zadaniaReact · Middle

Hook usePrevious

Napisz hook usePrevious(value), który zwraca wartość value z poprzedniego renderu. Przy pierwszym renderze poprzedniej wartości jeszcze nie ma - zwróć undefined.

Taki hook pomaga porównać props ze starą wartością, na przykład żeby animować zmianę liczby.

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

Ctrl+Enter uruchamia testy. Tab robi wcięcie; aby wyjść z edytora klawiaturą, naciśnij Esc, a potem Tab. Kod zapisuje się w tej przeglądarce.

Testy (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');