Effect Hookok
useEffect, useLayoutEffect, useInsertionEffect, useEffectEvent.
Effect Hookok
Az effect olyan mellékhatás (side effect), ami a komponensen kívüli rendszerrel kommunikál: pl. API hívás, eseményfigyelő, DOM módosítás, időzítő.
useEffect
Mire való?
Mellékhatások futtatására a renderelés után. Ez a leggyakrabban használt effect hook.
Mikor használjuk?
- API adatlekérés (fetch).
- Eseményfigyelők hozzáadása/eltávolítása.
- Külső library inicializálás.
- Animációk indítása.
import { useState, useEffect } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
// Ez lefut minden render után, ha userId megváltozik
fetch(`/api/users/${userId}`)
.then(res => res.json())
.then(data => setUser(data));
// Cleanup függvény: lefut, mielőtt az effect újrafut, vagy a komponens unmountolódik
return () => {
console.log('Cleanup');
};
}, [userId]); // dependency array: csak akkor fut újra, ha userId változik
return <div>{user?.name}</div>;
}📌 Dependency array viselkedése:
| Szintaxis | Mikor fut? |
|---|---|
useEffect(() => {...}) | Minden render után |
useEffect(() => {...}, []) | Csak egyszer, mount után |
useEffect(() => {...}, [érték]) | Ha érték megváltozik |
useLayoutEffect
Mire való?
Ugyanaz mint a useEffect, de a DOM frissítése után, a böngésző festése előtt fut le.
Mikor használjuk?
- Ha egy elem méretét vagy pozícióját kell kiolvasnod, mielőtt a felhasználó látja.
- Villódzás elkerülése DOM manipulációknál.
import { useLayoutEffect, useRef } from 'react';
function Tooltip({ children }) {
const ref = useRef(null);
useLayoutEffect(() => {
// Az elem méreteit már el lehet olvasni itt
const { height } = ref.current.getBoundingClientRect();
console.log('Magasság:', height);
});
return <div ref={ref}>{children}</div>;
}⚠️ Fontos: Ha nem szükséges, inkább useEffect-et használj – a useLayoutEffect blokkolja a festést.
useInsertionEffect
Mire való?
CSS-in-JS library-k számára készült hook, ami a DOM mutációk előtt fut. Normál alkalmazáskódban szinte sosem kell.
Mikor használjuk?
Kizárólag CSS-in-JS library készítésekor (pl. styled-components belső logikájához hasonló esetek).
useEffectEvent (React 19, stabil)
Mire való?
Egy effect "esemény" definiálása: olyan logika, ami az effecten belül fut, de nem dependency – mindig a legfrissebb értéket látja.
Mikor használjuk? Amikor egy effectben szükséged van egy értékre, de nem akarod, hogy az effect újrafusson, ha az érték változik.
import { useEffect, useEffectEvent } from 'react';
function ChatRoom({ roomId, theme }) {
// Ez az "event" mindig a legfrissebb theme-t látja,
// de nem okoz újrafutást az effectben
const onConnected = useEffectEvent(() => {
showNotification('Csatlakozva!', theme);
});
useEffect(() => {
const connection = createConnection(roomId);
connection.on('connected', onConnected);
return () => connection.disconnect();
}, [roomId]); // theme NEM kell a dependency array-be!
}