تحميل البيانات وضبط السباقات

import { useEffect, useState } from "react";
function load(id) { return new Promise(resolve => setTimeout(() => resolve(id === "a" ? "Alpha" : "Beta"), id === "a" ? 40 : 5)); }
export default function App() { const [id, setId] = useState("a"); const [result, setResult] = useState("Loading"); useEffect(() => { let ignore = false; setResult("Loading"); load(id).then(value => { if (!ignore) setResult(value); }); return () => { ignore = true; }; }, [id]); return <main><h1>Current record</h1><button type="button" onClick={() => setId("b")}>Choose Beta</button><p>{result}</p></main>; }

Choose Beta before Alpha resolves: final result Beta.

يبطل التنظيف نشر Alpha عند تغير المعرف ويبقى الناتج Beta رغم اكتمال الوعد القديم.

import { useState } from "react";
export default function App() { const [status, setStatus] = useState("Idle"); async function check() { setStatus("Pending"); try { await Promise.reject(new Error("Synthetic unavailable")); setStatus("Ready"); } catch { setStatus("Check unavailable; try again"); } } return <main><h1>Local check</h1><button type="button" disabled={status === "Pending"} onClick={check}>Check</button><p>{status}</p></main>; }

Initial: Idle. After Check: Check unavailable; try again.

يملك الحدث الوعد ويراقب رفضه ولا يعلن نجاحا للفشل.