React Academy · Les

useDeferredValue voor input-debouncing

Stel re-renders van trage delen van de UI uit terwijl invoer direct blijft reageren.

Les 3 van 413 stappen

useDeferredValue voor input-debouncing is een gratis React Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Academy bevat in totaal 4 lessen.

Welkom

In deze les gebruik je useDeferredValue om het opnieuw renderen van dure delen van de UI uit te stellen, terwijl gestuurde invoer vlot en responsief blijft.

Wat is useDeferredValue?

useDeferredValue accepteert een waarde en retourneert een uitgestelde versie ervan. Tijdens urgente renders loopt de uitgestelde waarde achter op de huidige waarde. Zo kan React de UI in twee stappen bijwerken: snel voor de invoer en uitgesteld voor de dure uitvoer.

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

Toepassen op dure componenten

Geef de uitgestelde waarde, niet de actuele waarde, door aan de dure component. De dure component wordt alleen opnieuw gerenderd wanneer deferredQuery verandert; bij snel typen loopt die achter op de invoer.

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 */}
    </>
  );
}

Aanduiding voor verouderde inhoud tonen

Vergelijk de actuele waarde met de uitgestelde waarde. Als ze verschillen, is de inhoud verouderd en kun je deze vervagen met opacity of een laadspinner tonen.

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

useDeferredValue versus debounce

Een debounce op basis van setTimeout introduceert altijd een vaste vertraging, bijvoorbeeld 300 ms, zelfs op snelle apparaten. useDeferredValue past zich aan: op snelle apparaten wordt de waarde meteen gerenderd en op trage apparaten wordt het renderen uitgesteld om haperingen te voorkomen.

useDeferredValue versus useTransition

Gebruik useTransition wanneer je de setter van de state zelf beheert, zodat je setState kunt wikkelen. Gebruik useDeferredValue wanneer je een waarde ontvangt als prop of uit een context en niet kunt bepalen wanneer deze wordt bijgewerkt.

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

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

Combineren met React.memo

Om opnieuw renderen met useDeferredValue effectief over te slaan, moet de dure component in React.memo worden gewikkeld. Zonder deze wrapper wordt de component telkens opnieuw gerenderd wanneer de ouder opnieuw rendert, ongeacht de uitgestelde waarde.

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

De uitgestelde waarde tijdens de eerste render

Tijdens de eerste render is de uitgestelde waarde gelijk aan de huidige waarde; er is geen vertraging. Uitstellen wordt pas actief wanneer de huidige en uitgestelde waarde tijdens een nieuwe render van elkaar verschillen.

Meerdere uitgestelde waarden

Je kunt useDeferredValue meerdere keren aanroepen voor verschillende dure delen van de UI. Elk deel wordt onafhankelijk uitgesteld.

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

Beperkingen

useDeferredValue maakt rendering niet sneller; het stelt deze alleen uit. Als de dure render 500 ms duurt, blijft de UI haperen. Combineer het met virtualisatie, bijvoorbeeld react-virtual, voor echt grote lijsten.

Korte controle

Wanneer biedt useDeferredValue voordeel ten opzichte van een gewone waarde?

Beantwoord dit in de interactieve les

Samenvatting

useDeferredValue retourneert een achterlopende versie van een waarde. Geef deze door aan dure componenten die in React.memo zijn gewikkeld. Toon een aanduiding voor verouderde inhoud wanneer deferredValue !== value. Geef voor adaptieve prestaties de voorkeur aan useDeferredValue boven debounce met een vaste vertraging.

Hierna

Volgende les: **Suspense voor grenzen rond gegevens en code** — je combineert Suspense met lazy laden en gegevensbibliotheken voor nette laadtoestanden.

Gratis beginnen

Leer React met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 88
Lessen: 324

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “useDeferredValue voor input-debouncing” gratis?

Ja — de volledige tekst van “useDeferredValue voor input-debouncing” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus React Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus React Academy bevat in totaal 4 lessen.

Wat leer ik in “useDeferredValue voor input-debouncing”?

Stel re-renders van trage delen van de UI uit terwijl invoer direct blijft reageren. Je oefent met React Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met React Academy te beginnen?

Ervaring vooraf is niet nodig. React Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “useDeferredValue voor input-debouncing”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over React Academy?

Ja. Elke les over React Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Racecondities en effectopruiming
useTransition voor niet-blokkerende UI-updates
useDeferredValue voor input-debouncing
Suspense voor data- en codegrenzen

← Terug naar React Academy