الانتقالات والعرض القابل للمقاطعة

import { useState, useTransition } from "react";
export default function App() { const [tab, setTab] = useState("Overview"); const [pending, startTransition] = useTransition(); return <main><h1>Panels</h1><button type="button" onClick={() => startTransition(() => setTab("Details"))}>Show details</button>{pending && <p>Updating</p>}<h2>{tab}</h2></main>; }

After Show details settles: Details.

يوسَم العرض أقل إلحاحا وتثبت نهايته دون ضمان رؤية مدة الانتظار.

import { useDeferredValue, useState } from "react";
const names = ["Alpha", "Beta", "Gamma"];
export default function App() { const [query, setQuery] = useState(""); const deferred = useDeferredValue(query); const matches = names.filter(n => n.toLowerCase().includes(deferred.toLowerCase())); return <main><h1>Local search</h1><label>Query<input value={query} onChange={e => setQuery(e.target.value)} /></label>{query !== deferred && <p>Results catching up</p>}<ul>{matches.map(n => <li key={n}>{n}</li>)}</ul></main>; }

Typing bet eventually leaves only Beta in the results.

الكتابة عاجلة وقد يستهلك العرض استعلاما أقدم وجيزا، والأسماء ثابتة في هذه العينة.