Wprowadzenie do React Hooks

Czym są React Hooks?

React Hooks zostały wprowadzone w wersji 16.8 jako sposób na używanie stanu i innych funkcji Reacta bez pisania klas. Hooks pozwalają na łatwiejsze ponowne wykorzystanie logiki między komponentami, co czyni kod bardziej przejrzystym i łatwiejszym w utrzymaniu.

Podstawowe Hooki

useState

Hook

useState

pozwala na dodanie lokalnego stanu do komponentów funkcyjnych:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Kliknięto {count} razy</p>
      <button onClick={() => setCount(count + 1)}>Kliknij mnie</button>
    </div>
  );
}

useEffect

Hook

useEffect

pozwala na wykonywanie efektów ubocznych w komponentach funkcyjnych:

import React, { useState, useEffect } from 'react';

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

  // Podobny do componentDidMount i componentDidUpdate:
  useEffect(() => {
    // Aktualizacja tytułu dokumentu
    document.title = `Kliknięto ${count} razy`;

    // Funkcja czyszcząca (opcjonalna)
    return () => {
      document.title = 'React App';
    };
  }, [count]); // Wykonuje się tylko gdy count się zmienia

  return (
    <div>
      <p>Kliknięto {count} razy</p>
      <button onClick={() => setCount(count + 1)}>Kliknij mnie</button>
    </div>
  );
}

Tworzenie własnych hooków

Jedną z najlepszych cech hooków jest możliwość tworzenia własnych hooków, które enkapsulują logikę specyficzną dla twojej aplikacji.

Przykład: useFetch

import { useState, useEffect } from 'react';

interface UseFetchResult<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
}

function useFetch<T>(url: string): UseFetchResult<T> {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (e) {
        setError(e instanceof Error ? e : new Error(String(e)));
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Użycie własnego hooka

import React from 'react';
import useFetch from './useFetch';

function UserProfile({ userId }) {
  const {
    data: user,
    loading,
    error,
  } = useFetch(`https://api.example.com/users/${userId}`);

  if (loading) return <div>Ładowanie...</div>;
  if (error) return <div>Wystąpił błąd: {error.message}</div>;
  if (!user) return <div>Nie znaleziono użytkownika</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
      <p>Telefon: {user.phone}</p>
    </div>
  );
}

Interaktywny przykład

Poniżej znajduje się wideo z tutorialem, które pokazuje praktyczne zastosowanie React Hooks:

Diagram Cyklu życia

Zobaczmy, jak działa cykl życia komponentu z hookami:

Podsumowanie

React Hooks to potężne narzędzie, które rewolucjonizuje sposób pisania komponentów React. Dzięki nim możemy:

• Używać stanu i cyklu życia w komponentach funkcyjnych
• Ponownie wykorzystywać logikę stanu między komponentami
• Tworzyć bardziej przejrzysty i łatwiejszy w utrzymaniu kod

Jeśli chcesz dowiedzieć się więcej, polecamy zapoznanie się z następującymi zasobami:

• Oficjalna dokumentacja React Hooks
• Custom Hooks - najlepsze praktyki
• TypeScript z React Hooks