किसी इफ़ेक्ट के भीतर fetch से दूरस्थ डेटा लोड करें, लोडिंग और त्रुटि की स्थितियों को साफ़-सुथरे ढंग से मॉडल करें।
इस पाठ को Kodokon में खोलेंएक नेटवर्क अनुरोध समय लेता है और विफल हो सकता है: आपके इंटरफ़ेस को उन वास्तविकताओं को दर्शाना चाहिए। पेशेवर परंपरा है तीन अलग state के टुकड़ों को ट्रैक करना: प्राप्त डेटा, एक लोडिंग बूलियन, और एक संभावित त्रुटि। अनुरोध एक useEffect के भीतर जाता है, क्योंकि किसी सर्वर से संपर्क करना एक साइड इफ़ेक्ट है।
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch("https://api.example.com/users")
.then((res) => {
if (!res.ok) throw new Error("HTTP " + res.status);
return res.json();
})
.then((data) => setUsers(data))
.catch((err) => setError(err.message))
.finally(() => setLoading(false));
}, []);render में, मामलों को क्रम में संभालें: पहले लोडिंग, फिर त्रुटि, और अंत में डेटा। ये अर्ली रिटर्न कोड को पठनीय रखते हैं और गारंटी देते हैं कि उपयोगकर्ता हमेशा कुछ सुसंगत देखे: एक प्रतीक्षा संकेतक, एक विफलता संदेश, या अपेक्षित सूची।
if (loading) return <p>Loading…</p>;
if (error) return <p>Error: {error}</p>;
return (
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);एक आख़िरी जाल: यदि कोई डिपेंडेंसी बदलती है (उदाहरण के लिए एक userId), तो एक नया अनुरोध बाहर जाता है जबकि पुराना अभी भी प्रवाह में हो सकता है। यदि पुराना आख़िर में जवाब देता है, तो यह ताज़ा डेटा को अधिलेखित कर देगा। शास्त्रीय उपाय: क्लीनअप फ़ंक्शन द्वारा true पर सेट किया गया एक ignore फ़्लैग, बासी प्रतिक्रियाओं को फेंकने के लिए।
useEffect(() => {
let ignore = false;
setLoading(true);
fetch("/api/users/" + userId)
.then((res) => res.json())
.then((data) => {
if (!ignore) setUser(data);
})
.finally(() => {
if (!ignore) setLoading(false);
});
return () => {
ignore = true;
};
}, [userId]);catch कभी फ़ायर नहीं होता। क्यों?ignore फ़्लैग किसलिए उपयोग होता है?