Co to jest useEffect?
useEffect to jeden z najważniejszych hooków w React, który pozwala na wykonywanie efektów ubocznych w komponentach funkcyjnych. Efekty uboczne to operacje, które nie są bezpośrednio związane z renderowaniem komponentu, takie jak pobieranie danych, subskrypcje, czy manipulacje DOM.
Podstawowe użycie useEffect
Podstawowa składnia useEffect wygląda następująco:
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
// Kod efektu ubocznego
}, []);
return (
<div>Mój komponent</div>
);
}
W powyższym przykładzie useEffect przyjmuje dwa argumenty: funkcję efektu ubocznego oraz tablicę zależności. Tablica zależności określa, kiedy efekt powinien być ponownie wykonany.
Tablica zależności
Tablica zależności jest kluczowym elementem useEffect. Może przyjmować różne wartości, które wpływają na sposób działania efektu:
- Pusta tablica: Efekt zostanie wykonany tylko raz, po pierwszym renderowaniu komponentu.
- Brak tablicy: Efekt będzie wykonywany po każdym renderowaniu komponentu.
- Tablica z wartościami: Efekt będzie wykonywany tylko wtedy, gdy którakolwiek z wartości w tablicy ulegnie zmianie.
Przykład użycia useEffect z pobieraniem danych
Rozważmy przykład, w którym używamy useEffect do pobierania danych z API:
import React, { useState, useEffect } from 'react';
function DataFetchingComponent() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
<div>
{data.map(item => (
<div key={item.id}>{item.name}</div>
))}
</div>
);
}
W tym przykładzie useEffect jest używany do pobierania danych z API po pierwszym renderowaniu komponentu. Pusta tablica zależności oznacza, że efekt zostanie wykonany tylko raz.
Czyszczenie efektów ubocznych
W niektórych przypadkach konieczne jest wyczyszczenie efektu ubocznego, na przykład przy subskrypcjach lub timerach. Można to zrobić, zwracając funkcję czyszczącą z useEffect:
import React, { useEffect } from 'react';
function TimerComponent() {
useEffect(() => {
const timer = setInterval(() => {
console.log('Timer tick');
}, 1000);
return () => {
clearInterval(timer);
};
}, []);
return (
<div>Timer Component</div>
);
}
W tym przykładzie useEffect ustawia timer, który loguje wiadomość co sekundę. Funkcja czyszcząca clearInterval jest zwracana, aby zatrzymać timer, gdy komponent zostanie odmontowany.
Porównanie z componentDidMount i componentDidUpdate
useEffect może zastąpić zarówno componentDidMount, jak i componentDidUpdate w komponentach klasowych. Oto porównanie:
Metoda | Opis |
---|---|
componentDidMount | Wykonywana po pierwszym renderowaniu komponentu. |
componentDidUpdate | Wykonywana po każdym aktualizowaniu komponentu. |
useEffect | Może zastąpić obie metody, w zależności od tablicy zależności. |
Podsumowanie
useEffect to potężne narzędzie w React, które pozwala na wykonywanie efektów ubocznych w komponentach funkcyjnych. Dzięki tablicy zależności możemy precyzyjnie kontrolować, kiedy efekty powinny być wykonywane. Pamiętaj o czyszczeniu efektów ubocznych, aby uniknąć wycieków pamięci. Zrozumienie useEffect jest kluczowe dla efektywnego tworzenia aplikacji w React.