React Academy · Lektion

useDeferredValue för debouncing av inmatning

Fördröj omrenderingar av långsamma delar av UI:t samtidigt som inmatningen förblir snabb.

Lektion 3 av 413 steg

useDeferredValue för debouncing av inmatning är en gratis lektion i React Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen använder Ni useDeferredValue för att fördröja omrenderingen av kostsamma delar av gränssnittet samtidigt som kontrollerad inmatning förblir snabb och responsiv.

Vad är useDeferredValue?

useDeferredValue tar emot ett värde och returnerar en uppskjuten version av det. Det uppskjutna värdet släpar efter det aktuella värdet under brådskande rendering, så att React kan uppdatera gränssnittet i två steg: snabbt för inmatningen och uppskjutet för det kostsamma resultatet.

const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
// query updates immediately on keystroke
// deferredQuery updates when React has capacity

Användning med kostsamma komponenter

Skicka det uppskjutna värdet, inte det aktuella värdet, till den kostsamma komponenten. Den kostsamma komponenten renderas bara om när deferredQuery ändras – vilket släpar efter inmatningen när användaren skriver snabbt.

function App() {
  const [q, setQ] = useState('');
  const dq = useDeferredValue(q);
  return (
    <>
      <input value={q} onChange={e => setQ(e.target.value)} />
      <HeavyList query={dq} /> {/* renders with deferred value */}
    </>
  );
}

Visa en indikator för inaktuellt innehåll

Jämför det aktuella värdet med det uppskjutna värdet. När de skiljer sig åt är innehållet inaktuellt, och Ni kan tona ned det med opacity eller visa en laddningsindikator.

const isStale = q !== dq;
<div style={{ opacity: isStale ? 0.5 : 1 }}>
  <HeavyList query={dq} />
</div>

useDeferredValue jämfört med debounce

En setTimeout-baserad debounce lägger alltid till en fast fördröjning, till exempel 300 ms, även på snabba maskiner. useDeferredValue är adaptiv – på snabba enheter renderas innehållet direkt och på långsamma enheter skjuts det upp för att förhindra ryckighet.

useDeferredValue jämfört med useTransition

Använd useTransition när Ni ÄGER state-settern, så att Ni kan omsluta setState. Använd useDeferredValue när Ni tar emot ett värde som prop eller från ett Context och inte kan styra när det uppdateras.

// You own the state: use useTransition
startTransition(() => setTab(newTab));

// You receive the value: use useDeferredValue
const deferredProp = useDeferredValue(props.searchQuery);

Kombinera med React.memo

För att useDeferredValue effektivt ska kunna hoppa över omrenderingar måste den kostsamma komponenten omslutas i React.memo. Utan det renderas komponenten om varje gång föräldern renderas om, oavsett det uppskjutna värdet.

const HeavyList = React.memo(function({ query }) {
  // expensive rendering
  return <ul>{data.filter(q => ...).map(...)}</ul>;
});

Det uppskjutna värdet vid den första renderingen

Vid den första renderingen är det uppskjutna värdet samma som det aktuella värdet – det finns ingen fördröjning. Uppskjutningen börjar först när det aktuella och det uppskjutna värdet skiljer sig åt under en omrendering.

Flera uppskjutna värden

Ni kan anropa useDeferredValue flera gånger för olika kostsamma delar av gränssnittet, där varje del skjuts upp oberoende av de andra.

const deferredA = useDeferredValue(valueA);
const deferredB = useDeferredValue(valueB);

Begränsningar

useDeferredValue gör inte renderingen snabbare – den fördröjer den bara. Om den kostsamma renderingen tar 500 ms kommer gränssnittet fortfarande att bli ryckigt. Kombinera med virtualisering (react-virtual) för riktigt stora listor.

Snabbtest

När ger useDeferredValue en fördel jämfört med ett vanligt värde?

Besvara frågan i den interaktiva lektionen

Sammanfattning

useDeferredValue returnerar en eftersläpande version av ett värde. Skicka det till kostsamma komponenter som är omslutna i React.memo. Visa en indikator för inaktuellt innehåll när deferredValue !== value. Föredra detta framför debounce med fast fördröjning för adaptiv prestanda.

Nästa steg

Nästa lektion: **Suspense för data- och kodgränser** — Ni kommer att kombinera Suspense med lazy loading och databibliotek för tydliga laddningstillstånd.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”useDeferredValue för debouncing av inmatning” gratis?

Ja – hela texten till ”useDeferredValue för debouncing av inmatning” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”useDeferredValue för debouncing av inmatning”?

Fördröj omrenderingar av långsamma delar av UI:t samtidigt som inmatningen förblir snabb. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”useDeferredValue för debouncing av inmatning”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Race conditions och rensning av effekter
useTransition för icke-blockerande UI-uppdateringar
useDeferredValue för debouncing av inmatning
Suspense för data- och kodgränser

← Tillbaka till React Academy