← Wszystkie zadaniaReact · Junior

Hook useToggle

Napisz hook useToggle(initial = false). Zwraca tablicę [value, toggle]: bieżącą wartość logiczną i funkcję, która ją przełącza.

Funkcja toggle musi być ta sama między renderami, żeby można ją było bez strat przekazywać do komponentów memoizowanych i zależności efektów.

function useToggle(initial = false) {
  // ...
}

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 (4)

const { result } = renderHook(() => useToggle());
expect(result.current[0]).toBe(false);

const { result } = renderHook(() => useToggle(true));
expect(result.current[0]).toBe(true);

const { result } = renderHook(() => useToggle());
act(() => result.current[1]());
expect(result.current[0]).toBe(true);
act(() => result.current[1]());
expect(result.current[0]).toBe(false);

const { result } = renderHook(() => useToggle());
const first = result.current[1];
act(() => result.current[1]());
expect(result.current[1]).toBe(first);