Lekcja 6: Cykl Życia Komponentu - Hook useEffect

Komponenty React przechodzą przez różne fazy podczas swojego istnienia na stronie: montowanie (mounting), aktualizacja (updating) i odmontowywanie (unmounting). W komponentach klasowych mieliśmy dedykowane metody cyklu życia (np. componentDidMount, componentDidUpdate, componentWillUnmount). W komponentach funkcyjnych, do obsługi tych faz oraz zarządzania efektami ubocznymi (side effects) służy Hook useEffect.

Co to są Efekty Uboczne?

Efekty uboczne to operacje, które komponent musi wykonać poza swoim głównym zadaniem, jakim jest renderowanie UI. Przykłady efektów ubocznych to:

• Pobieranie danych z API (fetching data).
• Bezpośrednia manipulacja DOM (choć staramy się tego unikać w React).
• Ustawianie subskrypcji (np. do WebSockets, zdarzeń przeglądarki).
• Ustawianie timerów (setTimeout, setInterval).
• Logowanie do konsoli.

Takie operacje nie powinny być wykonywane bezpośrednio w ciele komponentu funkcyjnego, ponieważ ciało funkcji jest wykonywane przy każdym renderowaniu, co mogłoby prowadzić do niekontrolowanego powtarzania efektów.

Hook `useEffect`

Hook useEffect pozwala uruchamiać efekty uboczne w odpowiedzi na zmiany w cyklu życia komponentu lub zmiany określonych wartości (stanu lub propsów).

Podstawowa składnia:**

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

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

  useEffect(() => {
    // Kod efektu ubocznego
    console.log(\'Komponent został zamontowany lub zaktualizowany.\');
    document.title = `Kliknięto ${count} razy`;

    // Opcjonalna funkcja czyszcząca (cleanup function)
    return () => {
      console.log(\'Czyszczenie przed kolejnym uruchomieniem efektu lub odmontowaniem komponentu.\');
      // np. anulowanie subskrypcji, czyszczenie timerów
    };
  }, [dependencies]); // Tablica zależności

  // ... reszta komponentu
}

• Pierwszy argument useEffect to funkcja zawierająca kod efektu ubocznego.
• Drugi, opcjonalny argument to tablica zależności (dependency array). Kontroluje ona, kiedy efekt ma zostać ponownie uruchomiony.
• Funkcja efektu może opcjonalnie zwrócić inną funkcję, zwaną funkcją czyszczącą (cleanup function).

Kontrolowanie Uruchamiania Efektu za pomocą Tablicy Zależności

1. Efekt uruchamiany po każdym renderowaniu

Jeśli nie podasz tablicy zależności, efekt będzie uruchamiany po każdym renderowaniu komponentu (zarówno początkowym, jak i po każdej aktualizacji).

useEffect(() => {
  console.log(\'Uruchamiam po każdym renderowaniu!\');
}); // Brak tablicy zależności

Uwaga: Używaj tego ostrożnie, ponieważ może to prowadzić do problemów z wydajnością lub nieskończonych pętli, jeśli efekt sam powoduje zmianę stanu.

2. Efekt uruchamiany tylko raz (po zamontowaniu)

Jeśli podasz pustą tablicę zależności [], efekt zostanie uruchomiony tylko raz, zaraz po pierwszym renderowaniu komponentu (podobnie do componentDidMount).

useEffect(() => {
  console.log(\'Komponent zamontowany!\');
  // Idealne miejsce na jednorazowe pobranie danych z API
}, []); // Pusta tablica zależności

3. Efekt uruchamiany, gdy zmienią się zależności

Jeśli podasz tablicę z wartościami (zazwyczaj propsy lub stan), efekt zostanie uruchomiony po pierwszym renderowaniu oraz za każdym razem, gdy którakolwiek z wartości w tablicy zależności ulegnie zmianie w porównaniu do poprzedniego renderowania.

const [userId, setUserId] = useState(1);

useEffect(() => {
  console.log(`Pobieram dane dla użytkownika ${userId}`);
  // fetch(`/api/users/${userId}`)... 
}, [userId]); // Efekt uruchomi się, gdy zmieni się `userId`

Ważne: W tablicy zależności umieszczaj tylko te wartości (propsy, stan, funkcje zdefiniowane w komponencie), które są używane wewnątrz funkcji efektu i których zmiana powinna spowodować ponowne uruchomienie efektu.

Funkcja Czyszcząca (Cleanup Function)

Funkcja zwracana przez funkcję efektu jest uruchamiana:

• Bezpośrednio przed kolejnym uruchomieniem tego samego efektu (jeśli zależności się zmieniły).
• Bezpośrednio przed odmontowaniem komponentu (podobnie do componentWillUnmount).

Jest to idealne miejsce do "posprzątania" po efekcie, np. anulowania subskrypcji, usunięcia nasłuchiwania zdarzeń, wyczyszczenia timerów.

useEffect(() => {
  const handleResize = () => console.log(\'Zmieniono rozmiar okna\');
  window.addEventListener(\'resize\', handleResize);
  console.log(\'Dodano nasłuchiwanie resize\');

  // Funkcja czyszcząca
  return () => {
    window.removeEventListener(\'resize\', handleResize);
    console.log(\'Usunięto nasłuchiwanie resize\');
  };
}, []); // Uruchom tylko raz przy montowaniu, wyczyść przy odmontowywaniu

Przykład: Pobieranie Danych z API

useEffect jest powszechnie używany do pobierania danych po zamontowaniu komponentu.

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true); // Rozpocznij ładowanie
    setError(null);   // Zresetuj błąd

    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(\'Nie udało się pobrać danych\');
        }
        return response.json();
      })
      .then(data => {
        setUser(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error.message);
        setLoading(false);
      });

    // Funkcja czyszcząca nie jest tu zazwyczaj potrzebna, 
    // chyba że chcemy anulować zapytanie, jeśli komponent zostanie odmontowany
    // przed otrzymaniem odpowiedzi (np. za pomocą AbortController)

  }, [userId]); // Pobierz dane ponownie, gdy zmieni się userId

  if (loading) return <p>Ładowanie...</p>;
  if (error) return <p>Błąd: {error}</p>;
  if (!user) return null; // Lub inny komunikat

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

export default UserProfile;

// src/Clock.jsx
import React, { useState, useEffect } from \'react\';

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    // Uruchom timer po zamontowaniu
    const timerId = setInterval(() => {
      setTime(new Date());
    }, 1000);

    console.log(\'Timer uruchomiony\');

    // Funkcja czyszcząca - uruchamiana przy odmontowywaniu
    return () => {
      clearInterval(timerId);
      console.log(\'Timer zatrzymany\');
    };
  }, []); // Pusta tablica zależności - uruchom efekt tylko raz

  return (
    <div>
      <h2>Aktualny czas:</h2>
      <p>{time.toLocaleTimeString()}</p>
    </div>
  );
}

export default Clock;

// W App.jsx
import React from \'react\';
import Clock from \'./Clock\";

function App() {
  return (
    <div>
      <h1>Zegar React</h1>
      <Clock />
    </div>
  );
}

export default App;

Cel: Stworzyć komponent, który co sekundę aktualizuje wyświetlany czas.

Kroki:

1. Stwórz komponent funkcyjny Clock.
2. Użyj useState do przechowywania aktualnego czasu (obiektu Date).
3. Użyj useEffect, aby uruchomić timer (setInterval) po zamontowaniu komponentu. Timer powinien co sekundę aktualizować stan czasu na nowy obiekt Date.
4. Wewnątrz useEffect zwróć funkcję czyszczącą, która anuluje timer (clearInterval), gdy komponent zostanie odmontowany.
5. Wyrenderuj aktualny czas, formatując go np. za pomocą toLocaleTimeString().
6. Użyj komponentu Clock w App.jsx.

Stwórz komponent WindowWidthLogger, który:

1. Wyświetla aktualną szerokość okna przeglądarki.
2. Używa useState do przechowywania szerokości okna.
3. Używa useEffect do dodania nasłuchiwania zdarzenia resize na obiekcie window po zamontowaniu komponentu.
4. W funkcji obsługi zdarzenia resize aktualizuje stan szerokości okna.
5. Implementuje funkcję czyszczącą w useEffect, która usuwa nasłuchiwanie zdarzenia resize przy odmontowywaniu komponentu.
6. Początkową szerokość okna ustawia w stanie przy pierwszym renderowaniu (można to zrobić w useState lub w useEffect).