05. Custom Hooks

O czym jest ta prezentacja?

Custom Hooks

Custom Hooks to funkcje JavaScript zaczynające się od use, które mogą wywoływać inne hooki. Pozwalają wyodrębnić powtarzającą się logikę komponentu (fetch, formularze, timery) do reużywalnych funkcji, bez zmiany struktury komponentów.

Kluczowe pytania do odpowiedzi

Czym jest Custom Hook? — Funkcja useXxx enkapsulująca logikę z hookami React
Jak różni się od utility function? — Może używać hooków React (useState, useEffect)
Kiedy warto tworzyć Custom Hook? — Powtarzająca się logika w 2+ komponentach
Zasady hooków — tylko na najwyższym poziomie, tylko w React functions

Zakres merytoryczny

Problem duplikacji logiki — ten sam fetch w trzech komponentach
Tworzenie Custom Hooka — konwencja nazwy use, zwracanie wartości
useFetch — pobieranie danych z loading/error states
useLocalStorage — persystencja stanu w localStorage
useDebounce — opóźnienie wywołania (wyszukiwarka)

Wymagane elementy wizualne

Schemat

Przed: 3 komponenty z takim samym kodem fetch (30 linii każdy = 90 linii duplikacji). Po: 3 komponenty używające useFetch (3 linie każdy = 9 linii + 20 linii hooka = 29 linii). Oszczędność!

Przykład kodu JSX

Custom hook useFetch i dwa komponenty które go używają — pokazując eliminację duplikacji.

Warianty realizacji

Co to jest Custom Hook i zasady tworzenia
useFetch — prosty przykład pobierania danych
Schemat: przed/po refaktorze

Forma: 10 slajdów, 10 minut

Ocena: 3.0

A + useLocalStorage z pełnym przykładem
useDebounce dla wyszukiwarki
Testowanie Custom Hooków (renderHook)

Forma: 12-15 slajdów, 12 minut

Ocena: 4.0-5.0

Scenariusze i przykłady

Przykład 1 — useFetch

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    fetch(url, { signal: controller.signal })
      .then(res => res.json())
      .then(setData)
      .catch(err => { if (err.name !== 'AbortError') setError(err.message); })
      .finally(() => setLoading(false));
    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

// Użycie w komponencie — czyste i proste!
function UserList() {
  const { data: users, loading, error } = useFetch('/api/users');
  if (loading) return <p>Ładowanie...</p>;
  if (error) return <p>Błąd: {error}</p>;
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Przykład 2 — useLocalStorage

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  const setStoredValue = (newValue) => {
    setValue(newValue);
    localStorage.setItem(key, JSON.stringify(newValue));
  };

  return [value, setStoredValue];
}

// Użycie: stan który przeżywa odświeżenie strony
function Settings() {
  const [darkMode, setDarkMode] = useLocalStorage('darkMode', false);
  return (
    <button onClick={() => setDarkMode(!darkMode)}>
      {darkMode ? 'Jasny motyw' : 'Ciemny motyw'}
    </button>
  );
}

Wskazówki do wystąpienia

Pokaż refaktor

Zacznijcie od komponentu z 40 liniami logiki fetch, potem pokażcie jak po wydzieleniu do Custom Hooka komponent ma 8 linii. Wow-efekt gwarantowany!

Zasada nazewnictwa

Podkreślcie że use na początku to nie konwencja dekoracyjna — React używa tej nazwy do weryfikacji reguł hooków. Hook bez use w nazwie nie będzie walidowany przez ESLint.

Zasoby

React — Reusing Logic with Custom Hooks Oficjalny przewodnik po Custom Hookach.

react-use — biblioteka hooków Gotowe Custom Hooks do użycia.

Do dzieła!

Custom Hooks = DRY w React!

Każdy senior React developer tworzy własne hooki. To znak dojrzałości kodu. Po tej prezentacji klasie zrozumie jak pisać czysty, reużywalny kod!