← Alle AufgabenReact · Junior

Hook useToggle

Schreib einen Hook useToggle(initial = false). Er liefert ein Array [value, toggle]: den aktuellen booleschen Wert und eine Funktion, die ihn umdreht.

Die Funktion toggle muss zwischen Renders gleich bleiben, damit man sie ohne Nebenwirkungen an memoisierte Komponenten und Effect-Abhängigkeiten übergeben kann.

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

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