Ładowanie
Aplikacja webowa React

useEffect() – jak działa, kiedy używać.

Przykład użycia useEffect w React

React useEffect Hook: Przykład z Timerem

Ta strona wyjaśnia, jak używać hooka useEffect w React do stworzenia prostego timera. Przykład poniżej pokazuje, jak timer zwiększa licznik co sekundę po jego uruchomieniu, może zostać zatrzymany i zresetowany.

Opis kodu

Poniższy przykład pokazuje, jak zaimplementować timer w React z użyciem hooka useEffect. Ten hook pozwala na uruchamianie efektów ubocznych w komponencie, takich jak ustawienie timerów, pobieranie danych lub nasłuchiwanie zdarzeń.

Krok po kroku - wyjaśnienie kodu

  1. Inicjalizacja stanu: Używamy hooka useState, aby zainicjalizować dwie zmienne stanu: count (do przechowywania liczby sekund) i isRunning (do śledzenia, czy timer jest aktywny).
  2. Hook useEffect: Ten hook ustawia interwał, gdy timer jest włączony (czyli gdy isRunning ma wartość true). Timer zwiększa wartość count co sekundę. Gdy timer zostanie zatrzymany lub komponent zostanie odmontowany, interwał jest czyszczony, aby uniknąć wycieków pamięci.
  3. Resetowanie timera: Po naciśnięciu przycisku „Reset” wartość count zostaje ustawiona na 0, a timer zostaje zatrzymany.
  4. Przyciski start/stop: Przycisk „Start/Stop” przełącza stan isRunning. Kiedy timer jest uruchomiony, licznik zaczyna rosnąć; gdy jest zatrzymany, timer przestaje działać.

Przykładowy kod React

Poniżej znajduje się kod komponentu Timer w React, wyświetlony jako tekst:

<!-- Komponent Timer w React -->
<script type="text/babel">
import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function Timer() {
  const [count, setCount] = useState(0);   // Inicjalizuje stan z początkową wartością 0
  const [isRunning, setIsRunning] = useState(false);  // Stan dla przycisku start/stop

  // useEffect dla aktualizacji timera co sekundę
  useEffect(() => {
    if (!isRunning) return;  // Jeżeli timer nie jest włączony, nie rób nic

    const timer = setInterval(() => {
      setCount((prevCount) => prevCount + 1);  // Zwiększa count co sekundę
    }, 1000);

    return () => clearInterval(timer);  // Czyści timer, gdy komponent zostanie odmontowany lub gdy isRunning się zmieni
  }, [isRunning]);  // Uruchom efekt tylko wtedy, gdy isRunning się zmieni

  // Resetowanie timera
  const handleReset = () => {
    setCount(0);  // Ustawia wartość count na 0
    setIsRunning(false);  // Zatrzymuje timer
  };

  return (
    <div>
      <h1>Timer: {count} seconds</h1>
      <button onClick={() => setIsRunning(!isRunning)}>
        {isRunning ? "Stop" : "Start"}
      </button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);
</script>

Podsumowanie

Ten przykład pokazuje, jak wykorzystać hook useEffect w React do stworzenia timera, który co sekundę zwiększa licznik. Dzięki temu rozwiązaniu możesz łatwo zrozumieć, jak używać efektów ubocznych w komponentach React i jak kontrolować ich działanie poprzez przyciski.

Inne przykłady użycia useEffect w React

Inne przykłady użycia hooka useEffect w React

Hook useEffect w React pozwala na wykonywanie efektów ubocznych w komponentach. Poniżej znajdziesz różne przykłady użycia useEffect, takie jak pobieranie danych, aktualizacja DOM, ustawianie timerów oraz czyszczenie zasobów.

1. Użycie useEffect bez zależności

Jeśli nie przekażesz żadnych zależności, useEffect zostanie uruchomiony przy każdym renderowaniu komponentu.

    
useEffect(() => {
  console.log("Renderuje się przy każdej zmianie stanu lub propsów!");
});

2. Użycie useEffect z pustą listą zależności

Jeżeli przekażesz pustą tablicę [], useEffect zostanie uruchomiony tylko raz — przy pierwszym renderowaniu.

    
useEffect(() => {
  console.log("Wykonuje się tylko przy pierwszym renderowaniu.");
}, []);

3. Użycie useEffect z zależnościami

Możesz przekazać zmienne w tablicy zależności, aby useEffect działał tylko wtedy, gdy te zmienne się zmienią.

    
useEffect(() => {
  console.log("Wykonuje się, gdy 'count' się zmienia.");
}, [count]);

4. Czyszczenie zasobów w useEffect

Jeśli useEffect ustawia timer lub nasłuchuje zdarzeń, musisz posprzątać po sobie, gdy komponent przestanie być aktywny (unmount).

    
useEffect(() => {
  const timer = setInterval(() => {
    console.log("Timer działa");
  }, 1000);

  // Funkcja czyszcząca
  return () => {
    clearInterval(timer);
    console.log("Timer został zatrzymany.");
  };
}, []);

5. Pobieranie danych z API

useEffect jest często używany do pobierania danych z zewnętrznego API.

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

Podsumowanie

Powyższe przykłady pokazują, jak elastyczny jest hook useEffect w React. Możesz go używać do aktualizacji timera, pobierania danych, nasłuchiwania zdarzeń oraz sprzątania po sobie. Jest to jeden z podstawowych hooków w React, który pozwala na obsługę efektów ubocznych w aplikacjach React.

Related Posts