Przejdź do głównej zawartości
Codex13

10. Custom Hooks — enkapsulacja i reużywalność logiki

O czym jest to opracowanie?

Dział zatytułowany „O czym jest to opracowanie?”

Custom Hooks — reużywalna logika

Custom Hook to funkcja JavaScript zaczynająca się od use, która może wywoływać wbudowane hooki React. Pozwala wyodrębnić powtarzającą się logikę (fetch, localStorage, debounce) z komponentów do reużywalnych jednostek. Kluczowa technika refaktoringu w React.

Dlaczego warto to znać?

Dział zatytułowany „Dlaczego warto to znać?”

Pisanie tego samego fetch/loading/error kodu w każdym komponencie to antywzorzec. Custom hooks eliminują duplikację, ułatwiają testowanie i czynią komponenty czystymi (zajmują się tylko UI, nie logiką).

Cel Twojego opracowania

Dział zatytułowany „Cel Twojego opracowania”
  1. Wyjaśnić kiedy i po co wyodrębniać logikę do Custom Hooka
  2. Opisać zasady tworzenia (konwencja use, może wywoływać hooki)
  3. Stworzyć i omówić przynajmniej 2 praktyczne przykłady
  4. Porównać komponent z i bez custom hooka

Zakres obowiązkowy

Dział zatytułowany „Zakres obowiązkowy”
  1. Problem duplikacji logiki — ten sam kod w 3 komponentach
  2. Konwencja use — dlaczego nazwa musi zaczynać się od use
  3. useFetch — pobieranie danych z loading/error/data states
  4. useLocalStorage — persystentny stan z localStorage
  5. Testowanie — custom hook testowalny przez renderHook

Wymagane przykłady kodu

Dział zatytułowany „Wymagane przykłady kodu”

Przykład 1

Komponent PRZED refaktorem — logika fetch wewnątrz (30+ linii). Komponent PO refaktorze — używa useFetch (5 linii).

Przykład 2

Implementacja useFetch(url) — zwraca { data, loading, error }.

Przykład 3

useLocalStorage(key, initialValue) — para [value, setValue] z persystencją.

Proponowana struktura pracy

Dział zatytułowany „Proponowana struktura pracy”
  1. Wstęp — problem duplikacji logiki w React
  2. Rozdział 1: Czym jest Custom Hook — zasady, konwencja use
  3. Rozdział 2: useFetch — implementacja i użycie
  4. Rozdział 3: useLocalStorage i inne wzorce
  5. Podsumowanie
  6. Bibliografia

Pytania kontrolne

Dział zatytułowany „Pytania kontrolne”

Najczęstsze błędy

Dział zatytułowany „Najczęstsze błędy”

Zasoby

Dział zatytułowany „Zasoby”
React — Reusing Logic with Custom Hooks Oficjalny przewodnik po Custom Hookach.
react-use library Kolekcja gotowych Custom Hooków.

Do dzieła!

Dział zatytułowany „Do dzieła!”

Custom Hooks to dowód dojrzałości kodu!

Pokaż w opracowaniu konkretną transformację: komponent z dużą ilością logiki → ten sam komponent po wydzieleniu do Custom Hooka. Różnica w czytelności i objętości kodu będzie oczywista.