React Academy · leksjon

useDeferredValue for debouncing av inndata

Utsett nye rendringer av trege deler av brukergrensesnittet, samtidig som inndata forblir responsiv.

Leksjon 3 av 413 trinn

useDeferredValue for debouncing av inndata er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen skal du bruke useDeferredValue til å utsette ny rendering av kostbare deler av brukergrensesnittet, samtidig som kontrollerte inputfelt forblir raske og responsive.

Hva er useDeferredValue?

useDeferredValue tar imot en verdi og returnerer en utsatt versjon av den. Den utsatte verdien ligger etter den gjeldende verdien under presserende rendering, slik at React kan oppdatere brukergrensesnittet i to trinn: raskt for inndata og utsatt for kostbar visning.

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

Bruk på kostbare komponenter

Send den utsatte verdien, ikke den aktuelle verdien, til den kostbare komponenten. Den kostbare komponenten rendres på nytt bare når deferredQuery endres — og ved rask skriving ligger denne etter inndatafeltet.

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

Vis en indikator for foreldet innhold

Sammenlign den aktuelle verdien med den utsatte verdien. Når de er forskjellige, er innholdet foreldet, og du kan tone det ned med opacity eller vise en lastespinner.

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

useDeferredValue kontra debounce

Debounce basert på setTimeout innfører alltid en fast forsinkelse, for eksempel 300 ms, selv på raske maskiner. useDeferredValue tilpasser seg — på raske enheter rendres innholdet umiddelbart, mens det på trege enheter utsettes for å hindre hakking.

useDeferredValue kontra useTransition

Bruk useTransition når du EIER state-setteren, slik at du kan pakke setState inn i den. Bruk useDeferredValue når du mottar en verdi som en prop eller fra en context, og ikke kan kontrollere når den oppdateres.

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

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

Kombiner med React.memo

For at useDeferredValue effektivt skal kunne hoppe over ny rendering, må den kostbare komponenten pakkes inn i React.memo. Uten dette rendres komponenten på nytt hver gang forelderen rendres på nytt, uavhengig av den utsatte verdien.

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

Den utsatte verdien ved første rendering

Ved den første renderingen er den utsatte verdien lik den aktuelle verdien — det er ingen forsinkelse. Utsettelsen trer bare i kraft når den aktuelle og den utsatte verdien er forskjellige under en ny rendering.

Flere utsatte verdier

Du kan kalle useDeferredValue flere ganger for ulike kostbare deler av brukergrensesnittet. Hver verdi utsettes uavhengig av de andre.

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

Begrensninger

useDeferredValue gjør ikke renderingen raskere — den utsetter den bare. Hvis den kostbare renderingen tar 500 ms, vil brukergrensesnittet fortsatt hakke. Kombiner med virtualisering (react-virtual) for virkelig store lister.

Kort sjekk

Når gir useDeferredValue en fordel sammenlignet med en vanlig verdi?

Besvar den i den interaktive leksjonen

Oppsummering

useDeferredValue returnerer en forsinket versjon av en verdi. Send den til kostbare komponenter som er pakket inn i React.memo. Vis en indikator for foreldet innhold når deferredValue !== value. Foretrekk dette fremfor debounce med fast forsinkelse for adaptiv ytelse.

Neste leksjon

Neste leksjon: **Suspense for data- og kodegrenser** — du skal kombinere Suspense med lazy loading og databiblioteker for ryddige lastetilstander.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «useDeferredValue for debouncing av inndata» gratis?

Ja – hele teksten i «useDeferredValue for debouncing av inndata» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «useDeferredValue for debouncing av inndata»?

Utsett nye rendringer av trege deler av brukergrensesnittet, samtidig som inndata forblir responsiv. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «useDeferredValue for debouncing av inndata»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Kappløpsforhold og opprydding i effekter
useTransition for ikke-blokkerende UI-oppdateringer
useDeferredValue for debouncing av inndata
Suspense for data- og kodegrenser

← Tilbake til React Academy