Ładowanie
INF.04 React

ReactJS – useEffect()

⚙️ Część 1: Wprowadzenie

useEffect to hook, który umożliwia wykonywanie efektów ubocznych w komponentach React. Dzięki niemu można reagować na zmiany danych, pobierać dane z API, ustawiać timery lub manipulować elementami DOM po renderze.

Efekt uboczny (ang. side effect) to każda operacja, która wychodzi poza sam proces renderowania – np. pobranie danych, zmiana tytułu strony, subskrypcja zdarzeń czy zapis w localStorage.

Najczęstsze zastosowania:

  1. Pobieranie danych z API
  2. Reagowanie na zmiany stanu lub propsów
  3. Subskrypcje i czyszczenie zasobów (np. event listenerów)
  4. Manipulacja DOM po renderze

📚 Część 2: Co to jest useEffect

useEffect(() => {
  // kod, który ma się wykonać po renderze
}, [zależności]);
Element Opis
Funkcja efektu Kod wykonywany po wyrenderowaniu komponentu
Tablica zależności Lista wartości, po zmianie których efekt się uruchamia
Pusty efekt Jeśli tablica zależności jest pusta [], efekt wykona się tylko raz – przy montowaniu
Czyszczenie Można zwrócić funkcję, która wykona się przy odmontowaniu

💡 Część 3: Praktyczne przykłady

✅ Przykład 1: Efekt przy montowaniu komponentu

import React, { useEffect } from 'react';

function Montowanie() {
  useEffect(() => {
    console.log('Komponent został zamontowany');
  }, []);

  return <p>Sprawdź konsolę po załadowaniu komponentu</p>;
}

export default Montowanie;
📝 Wyjaśnienie:

Pusty drugi argument [] oznacza, że efekt wykona się tylko raz — po pierwszym renderze komponentu.

✅ Przykład 2: Efekt reagujący na zmianę stanu

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

function ZmianaStanu() {
  const [licznik, setLicznik] = useState(0);

  useEffect(() => {
    console.log('Licznik się zmienił:', licznik);
  }, [licznik]);

  return (
    <div>
      <p>Wartość: {licznik}</p>
      <button onClick={() => setLicznik(licznik + 1)}>Zwiększ</button>
    </div>
  );
}

export default ZmianaStanu;
📝 Wyjaśnienie:

Efekt wykonuje się za każdym razem, gdy zmieni się stan licznik. Tablica [licznik] określa zależność.

✅ Przykład 3: Pobieranie danych z API

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

function PobierzDane() {
  const [dane, setDane] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setDane(data));
  }, []);

  return (
    <div>
      <h3>Użytkownicy:</h3>
      <ul>
        {dane.map(u => <li key={u.id}>{u.name}</li>)}
      </ul>
    </div>
  );
}

export default PobierzDane;
📝 Wyjaśnienie:

useEffect pobiera dane tylko raz przy montowaniu. Po otrzymaniu danych aktualizuje stan i komponent renderuje się ponownie z nową zawartością.

✅ Przykład 4: Efekt z czyszczeniem

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

function Zegar() {
  const [czas, setCzas] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const interval = setInterval(() => {
      setCzas(new Date().toLocaleTimeString());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <p>Aktualny czas: {czas}</p>;
}

export default Zegar;
📝 Wyjaśnienie:

Efekt ustawia interwał, który aktualizuje godzinę co sekundę. Funkcja zwrócona z useEffect czyści interwał po odmontowaniu komponentu, zapobiegając błędom.

✅ Przykład 5: Obsługa zdarzenia i e.target.value

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

function EfektInput() {
  const [tekst, setTekst] = useState('');
  const [dlugosc, setDlugosc] = useState(0);

  function zmien(e) {
    setTekst(e.target.value);
  }

  useEffect(() => {
    setDlugosc(tekst.length);
  }, [tekst]);

  return (
    <div>
      <input
        type="text"
        value={tekst}
        onChange={zmien}
        placeholder="Wpisz coś..."
        style={{ padding: '8px', marginRight: '10px' }}
      />
      <p>Długość tekstu: {dlugosc}</p>
    </div>
  );
}

export default EfektInput;
📝 Wyjaśnienie:
  • onChange przekazuje wartość z inputa poprzez e.target.value.
  • useEffect reaguje na zmianę stanu tekst i aktualizuje jego długość.
  • Stan i efekt współpracują, tworząc dynamiczne zachowanie komponentu.

📌 Podsumowanie

# Punkt Szczegóły
1 useEffect Hook do wykonywania efektów ubocznych w komponentach funkcyjnych
2 Tablica zależności Określa, kiedy efekt ma się wykonać ponownie
3 Pusty efekt Efekt wykona się tylko raz, przy pierwszym renderze
4 Czyszczenie Funkcja zwrócona z efektu działa przy odmontowaniu komponentu
5 Zastosowania Pobieranie danych, timery, nasłuchiwanie zdarzeń, synchronizacja z lokalnym stanem

🏆 Dobre praktyki:

✓ Używaj [] jeśli efekt ma wykonać się tylko raz

✓ Dodawaj wszystkie zależności, których używa efekt

✓ Czyść zasoby (interwały, eventy) w funkcji zwrotnej

✓ Nie uruchamiaj efektów warunkowo w środku komponentu

🎉 Koniec lekcji

Related Posts