Egyéb Hookok
useId, useDebugValue, useSyncExternalStore, useOptimistic, useActionState.
Egyéb Hookok
useId
Mire való?
Egyedi, stabil azonosítót generál – szerver és kliens oldalon is azonos.
Mikor használjuk?
- Accessibility:
labelésinputösszekapcsolásához (htmlFor+id). - SSR (Next.js) esetén, ahol a szerver és kliens ID-nak egyeznie kell.
import { useId } from 'react';
function EmailField() {
const id = useId();
return (
<div>
<label htmlFor={id}>Email cím:</label>
<input id={id} type="email" />
</div>
);
}⚠️ Ne használd lista elemek key-jének! Arra a map indexe vagy egyedi adatmező való.
useDebugValue
Mire való?
Egyedi label megjelenítése a React DevTools-ban custom hookok debuggolásakor.
Mikor használjuk? Kizárólag saját custom hook írásánál, hogy a DevTools-ban értelmesebb nevet láss.
import { useDebugValue, useState } from 'react';
function useOnlineStatus() {
const [isOnline, setIsOnline] = useState(true);
// A DevTools-ban "OnlineStatus: Online" vagy "OnlineStatus: Offline" jelenik meg
useDebugValue(isOnline ? 'Online' : 'Offline');
return isOnline;
}useSyncExternalStore
Mire való?
Külső (React-en kívüli) store-ok (adattárolók) feliratkozásához és olvasásához.
Mikor használjuk?
- Külső state management library-k írásánál (pl. Zustand, Redux belső implementációjánál).
- Böngésző API-k figyelésénél (pl.
window.innerWidth,navigator.onLine).
import { useSyncExternalStore } from 'react';
function useWindowWidth() {
return useSyncExternalStore(
(callback) => {
window.addEventListener('resize', callback);
return () => window.removeEventListener('resize', callback);
},
() => window.innerWidth, // kliens oldali snapshot
() => 1024 // szerver oldali fallback
);
}💡 Tipp: Normál alkalmazáskódban ritkán szükséges – inkább library fejlesztők eszköze.
useOptimistic (React 19)
Mire való?
"Optimista UI" megvalósítása: azonnal megjeleníti a várható eredményt, még mielőtt a szerver válaszolna.
Mikor használjuk?
- Like gombok, kommentek, bevásárlókosár – ahol azonnali visszajelzés kell a felhasználónak.
import { useOptimistic, useState } from 'react';
function LikeButton({ postId, initialLikes }) {
const [likes, setLikes] = useState(initialLikes);
const [optimisticLikes, addOptimisticLike] = useOptimistic(
likes,
(currentLikes, increment) => currentLikes + increment
);
async function handleLike() {
addOptimisticLike(1); // azonnal +1 látható
await likePost(postId); // API hívás a háttérben
setLikes(l => l + 1); // valós frissítés
}
return <button onClick={handleLike}>❤️ {optimisticLikes}</button>;
}useActionState (React 19)
Mire való?
Form action-ök kezelésére: kezeli a pending állapotot, az eredményt és a hibákat.
Mikor használjuk?
- Server Action-ökkel dolgozó form-oknál (főleg Next.js App Router esetén).
- Egyszerű form submission állapotkezelésnél.
import { useActionState } from 'react';
async function submitAction(previousState, formData) {
const name = formData.get('name');
if (!name) return { error: 'A név kötelező!' };
await saveName(name);
return { success: true };
}
function NameForm() {
const [state, formAction, isPending] = useActionState(submitAction, null);
return (
<form action={formAction}>
<input name="name" />
<button type="submit" disabled={isPending}>
{isPending ? 'Mentés...' : 'Mentés'}
</button>
{state?.error && <p style={{ color: 'red' }}>{state.error}</p>}
{state?.success && <p style={{ color: 'green' }}>Sikerült!</p>}
</form>
);
}