How can you write custom hooks?

Co to custom hooks?

Najpierw odpowiedz na głos lub w myślach, potem porównaj.

Odpowiedź

Custom hook to funkcja zaczynająca się od use, która może korzystać z innych hooków.

JavaScript

function useWindowWidth() {
  const [width, setWidth] =
    useState(window.innerWidth);

  useEffect(() => {
    const handler = () =>
      setWidth(window.innerWidth);

    window.addEventListener(
      "resize",
      handler
    );

    return () =>
      window.removeEventListener(
        "resize",
        handler
      );
  }, []);

  return width;
}

Potem:

JavaScript

const width = useWindowWidth();

Pozwala wydzielić i ponownie wykorzystać logikę.

Doprecyzowanie:
Custom hook współdzieli logikę, ale nie automatycznie ten sam state. Każde użycie hooka zwykle ma własny state.

Jak poszło? Bądź szczery — „Jeszcze nie” dodaje pytanie do powtórki.