Hubert
8 min
9 października, 2024

Wprowadzenie do hooków i ich roli w React.js

React Hooks to funkcje wprowadzone w React 16.8, które umożliwiają korzystanie ze stanu i innych rozwiązań Reacta w komponentach funkcyjnych. Hooki upraszczają tworzenie i zarządzanie logiką w aplikacjach React. Dzięki hookom takim jak useState i useEffect programiści mogą zarządzać stanem, obsługiwać efekty uboczne (np. pobieranie danych) i optymalizować wydajność bez konieczności pisania klasowych komponentów.

Czytaj więcej
Wprowadzenie do hooków i ich roli w React.js

React hooks i ich znaczenie w React.js.

Hooki w React.js rozwiązują kilka wyzwań, które wcześniej utrudniały tworzenie bardziej złożonych komponentów funkcyjnych. 

Po pierwsze, umożliwiają lepszą organizację kodu. Jest to szczególnie przydatne, gdy logika komponentu staje się złożona. Dzięki hookom, takim jak useState czy useEffect, można łatwiej podzielić logikę na mniejsze, niezależne funkcje, co zwiększa czytelność i ułatwia debugowanie.

Kolejną zaletą hooków jest możliwość eliminacji powielonego kodu. W tradycyjnych komponentach klasowych ten sam kod dotyczący cyklu życia komponentu mógł być powtarzany w różnych metodach. Hooki takie jak useEffect pozwalają połączyć różne aspekty logiki, np. pobieranie danych i aktualizację stanu, w jednym miejscu.

Co więcej, hooki ułatwiają wielokrotne używanie logiki pomiędzy różnymi komponentami. Zamiast tworzyć złożone struktury oparte na komponentach wyższego rzędu (HOC), można łatwo wyodrębnić logikę do własnych hooków, co sprawia, że kod jest bardziej modularny i skalowalny.

Jakie są najczęściej używane hooki w React.js?

Poznaj najczęściej używane hooki, ich funkcje oraz zastosowanie:

Opis i zastosowanie useState

useState to jeden z najczęściej używanych hooków w React.js. Umożliwia on dodanie stanu do komponentu funkcyjnego. Pozwala na przechowywanie wartości w stanie wewnętrznym komponentu, oraz na jej aktualizację w odpowiedzi na interakcje użytkownika. Używając useState, możemy zdefiniować zmienną stanu oraz funkcję, która służy do jej aktualizacji. Ten hook przyjmuje wartość początkową stanu jako argument i zwraca tablicę, w której pierwszy element to aktualna wartość stanu, a drugi – funkcja umożliwiająca jego zmianę.

Zastosowanie: useState świetnie sprawdza się w prostych przypadkach, takich jak liczenie kliknięć w przycisk, włączanie/wyłączanie przycisku czy przechowywanie danych formularza.

const [count, setCount] = useState(0);

Przykłady użycia useEffect i jak zarządza on cyklem życia komponentu

useEffect jest hookiem, który pozwala zarządzać efektami ubocznymi w komponentach funkcyjnych, takimi jak pobieranie danych, subskrypcje czy manipulacje w DOM-ie. Ten hook jest odpowiednikiem metod cyklu życia w komponentach klasowych, takich jak componentDidMount, componentDidUpdate i componentWillUnmount. useEffect przyjmuje funkcję, która zostanie wykonana po każdym renderowaniu komponentu, oraz opcjonalną tablicę zależności, która kontroluje, kiedy efekt powinien być wywoływany.

Zastosowanie: useEffect jest często używany do pobierania danych z API, subskrybowania strumieni danych czy reagowania na zmiany w stanie aplikacji. Umożliwia on także czyszczenie efektów ubocznych, np. anulowanie subskrypcji lub timerów, co jest w procesie optymalizacji aplikacji.

useEffect(() => {
  // Pobieranie danych po załadowaniu komponentu
  fetchData();

  return () => {
    // Czyszczenie efektu po zakończeniu działania komponentu
    cleanup();
  };
}, [dependency]); // Efekt zostanie uruchomiony po zmianie zależności

Zastosowanie useContext do zarządzania globalnym stanem

useContext to hook, który umożliwia dostęp do globalnego kontekstu bez potrzeby ręcznego przekazywania propsów między komponentami. Umożliwia to łatwe zarządzanie stanem aplikacji na różnych poziomach drzewa komponentów. useContext współpracuje z Context API, które pozwala na tworzenie globalnych danych. Mowa o ustawienia motywu, dane użytkownika czy autoryzacja, dostępnych w całej aplikacji bez konieczności przekazywania ich przez kolejne komponenty.

Zastosowanie: useContext jest przydatny do zarządzania globalnym stanem, na przykład do przechowywania informacji o zalogowanym użytkowniku, motywie aplikacji, czy ustawieniach językowych.

const theme = useContext(ThemeContext);

Czym są custom hooki i jak je tworzyć?

Custom hooki w React.js to funkcje, które pozwalają wyodrębnić i ponownie wykorzystać logikę, która mogłaby być powtarzana w wielu komponentach. Custom hooki działają jak wbudowane hooki, takie jak useState czy useEffect. Umożliwiają jednak zebranie fragmentów logiki w jedną funkcję, którą można łatwo stosować w różnych miejscach aplikacji.

Główne zastosowania custom hooków to:

  • Ponowne używanie logiki, np. zarządzanie stanem formularza czy efekty uboczne (fetching danych).
  • Lepsza organizacja kodu – oddzielanie skomplikowanej logiki od komponentów.
  • Uproszczenie komponentów funkcyjnych — to poprawia ich czytelność i łatwość utrzymania.

Custom hooki są tworzone tak, jak zwykłe funkcje JavaScript, które mogą wykorzystywać inne hooki, takie jak useState czy useEffect, a następnie zwracać wartość lub funkcje używane w komponencie.

Przykłady prostych custom hooków i ich implementacja

Custom hooki umożliwiają organizację powtarzalnej logiki w prosty i czytelny sposób. To sprawia, że kod staje się bardziej modularny i łatwiejszy do utrzymania. Można je wielokrotnie wykorzystywać w różnych częściach aplikacji, upraszczając komponenty funkcyjne i eliminując duplikację kodu.

Custom hook do zarządzania stanem formularza

To hook do zarządzania formularzem, który przechowuje wartości pól formularza w stanie i automatycznie aktualizuje je po zmianach:

import { useState } from 'react';

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = (e) => {
    setValues({
      ...values,
      [e.target.name]: e.target.value,
    });
  };

  return [values, handleChange];
}

// Przykład użycia w komponencie:
const [formValues, handleInputChange] = useForm({ name: '', email: '' });

Custom hook do pobierania danych (fetch)

Ten hook zarządza procesem pobierania danych z API oraz obsługą stanu ładowania i błędów:

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

// Przykład użycia w komponencie:
const { data, loading, error } = useFetch('https://api.example.com/data');

Jakie są zasady korzystania z hooków?

Zasady korzystania z hooków są bardzo ważne, ponieważ pomagają w utrzymaniu stabilności stanu i cyklu życia komponentów. Gwarantują także, że hooki będą działać prawidłowo. 

Hooki w React.js muszą przestrzegać kilku kluczowych reguł. Po pierwsze, mogą być używane tylko na najwyższym poziomie komponentu, co oznacza, że nie można ich wywoływać wewnątrz pętli, warunków lub zagnieżdżonych funkcji. Ma to na celu zapewnienie spójności kolejności wywołań hooków przy każdym renderowaniu. Po drugie, hooki mogą być używane wyłącznie w komponentach funkcyjnych lub własnych hookach. Nie można ich stosować w komponentach klasowych ani funkcjach, które nie są komponentami React.

Jak hooki wpływają na wydajność komponentów?

Hooki mogą wpływać na wydajność komponentów przez częste ponowne renderowanie, zwłaszcza gdy funkcje są tworzone na nowo przy każdym renderze. Aby tego uniknąć, React oferuje narzędzia, takie jak useMemo i useCallback. useMemo zapamiętuje wynik skomplikowanych operacji, co zapobiega ich powtarzaniu przy każdym odświeżeniu komponentu. Z kolei useCallback zapamiętuje funkcje, dzięki czemu nie są one generowane od nowa, co zmniejsza liczbę zbędnych renderów komponentów.

Jak testować komponenty wykorzystujące hooki?

Testowanie komponentów z hookami w React można przeprowadzać za pomocą narzędzi, takich jak Jest i React Testing Library. Umożliwiają one testowanie logiki hooków oraz interakcji użytkownika. Aby przetestować sam hook, można użyć renderHook, a dla komponentów z hookami, testować ich zachowanie w odpowiedzi na różne akcje, np. kliknięcia. 

Przykład: W przypadku useState można sprawdzić, czy stan aktualizuje się poprawnie po zdarzeniu, symulując np. kliknięcie przycisku i weryfikując nowy stan.

Jakie są zaawansowane zastosowania hooków?

Hooki w React mogą być używane do zarządzania bardziej skomplikowanym stanem i złożonymi efektami ubocznymi. useReducer to hook, który sprawdza się w zaawansowanych scenariuszach, w których zarządzanie stanem wymaga więcej logiki niż useState. Umożliwia on obsługę skomplikowanych przypadków, takich jak wieloetapowe formularze czy zarządzanie wieloma powiązanymi stanami, podobnie jak w Reduxie.

Przykład: useReducer przyjmuje funkcję redukującą (reducer) oraz stan początkowy. Można go użyć w aplikacjach wymagających skomplikowanych operacji na stanie, np. przełączanie między różnymi widokami aplikacji lub rozbudowana walidacja formularza, w której każda akcja powoduje różne zmiany w stanie.

Jakie są najlepsze praktyki w używaniu hooków?

Aby utrzymać dobrą architekturę kodu z hookami, warto zadbać o modularność i możliwość ponownego wykorzystania logiki. Custom hooki pomagają oddzielać złożoną logikę od komponentów, co zwiększa ich czytelność i ułatwia zarządzanie kodem. Dobrą praktyką jest tworzenie hooków dla powtarzalnej logiki, np. pobierania danych lub obsługi formularzy.

Unikaj pułapek, takich jak wywoływanie hooków w pętlach czy warunkach. Hooki muszą być zawsze wywoływane na najwyższym poziomie komponentu. Aby zapobiec niepotrzebnym renderowaniom, stosuj optymalizacje jak useMemo i useCallback, które pomagają ograniczyć częstotliwość wywoływania funkcji i operacji.

Podsumowując, hooki w React.js to świetne narzędzie, które pomaga efektywnie zarządzać stanem i efektami ubocznymi w komponentach funkcyjnych. Dzięki hookom takim jak useState useEffect czy useContext programiści mogą tworzyć bardziej modularny i czytelny kod, unikając jednocześnie powielania logiki. Custom hooki dodatkowo zwiększają elastyczność i ponowne wykorzystanie kodu, co prowadzi do lepszej organizacji aplikacji i poprawy jej wydajności.

Powiązane artykuły
Wprowadzenie do hooków i ich roli w React.js
8 min
31 października, 2024
Zarządzanie stanem w React: Redux, Context API i Recoil
Zarządzanie stanem to kluczowy aspekt budowania aplikacji React. W artykule omówimy trzy popularne narzędzia: Redux,...
Dowiedz się więcej
Wprowadzenie do hooków i ich roli w React.js
8 min
17 października, 2024
Poznaj Server-Side Rendering w React
Server-side rendering (SSR) w React to przydatne narzędzie, które umożliwia tworzenie dynamicznych aplikacji internetowych o...
Dowiedz się więcej
Wprowadzenie do hooków i ich roli w React.js
6 min
3 października, 2024
Wirtualny DOM w React JS - o co w tym chodzi?
Wraz z rozwojem nowoczesnych aplikacji internetowych, zarządzanie dynamicznymi interfejsami użytkownika stało się wyzwaniem. React JS,...
Dowiedz się więcej
Zobacz wszystkie
Odkryj więcej tematów