Wprowadzenie do useEffect w React
Hook useEffect w React to potężne narzędzie, które umożliwia zarządzanie efektami ubocznymi w komponentach funkcyjnych. Efekty uboczne obejmują m.in. interakcję z API, manipulację DOM czy subskrypcje. Dzięki useEffect możemy wykonywać te operacje w sposób kontrolowany.
Podstawowa składnia
import React, { useEffect } from 'react';
function Component() {
useEffect(() => {
// Kod efektu
console.log("Komponent został zamontowany lub zaktualizowany");
return () => {
// Czyszczenie
console.log("Komponent został odmontowany");
};
}, []);
return <div>Hello World!</div>;
}
Kluczowe aspekty
//Bez zależności: uruchamia efekt po każdym renderze:
useEffect(() => {...})
//Z zależnościami: działa tylko, gdy zmienią się określone zależności:
useEffect(() => {...}, [dependency])
//Pusta tablica: uruchamia efekt tylko raz, przy montowaniu komponentu:
useEffect(() => {...}, [])
Inne z tej kategorii: Programowanie
Takie tam: www.marczuk.org
2 komentarze
[…] istnieje potrzeba uruchomienia funkcji asynchronicznej wewnątrz useEfect i poczekanie aż się zakończy. Dodanie słowa kluczowego async przed useEfect wydaje się dobrym […]
Nie można dać async przed useEffect, bo wtedy funkcja zwraca Promise, a React oczekuje, że zwróci funkcję sprzątającą (cleanup) albo undefined. Zamiast tego tworzymy wewnętrzną funkcję async i wywołujemy ją w środku.
useEffect(() => {
const fetchData = async () => {
const res = await fetch('/api/data');
const data = await res.json();
console.log(data);
};
fetchData();
}, []);