useTransition er en React-hook introdusert i React 18 som gir en måte å håndtere asynkrone oppgaver på en mer kontrollert og UX-vennlig måte. Hovedformålet med useTransition er å skille mellom "høy" og "lav" prioritet i applikasjonen for å unngå at langvarige eller krevende operasjoner (som API-kall eller tunge beregninger) blokkerer UI-oppdateringer som er kritiske for brukeropplevelsen.

Når en operasjon er mer tidkrevende kan du merke den som en "transition", som gir React muligheten til å prioritere visning av innholdet umiddelbart, og deretter fullføre f.eks API-kallet på bakgrunns-tråden uten å blokkere interaktiviteten.

Hvordan useTransition fungerer

• useTransition hooken returnerer et array med to verdier:

  1. isPending: En boolsk verdi som indikerer om en “transition” pågår.

  2. startTransition: En funksjon som lar deg definere hvilke oppdateringer som skal behandles som en "lav-prioritets" operasjon.

Når du bruker useTransition kan du gjøre oppdateringer som ellers ville blokkert UI, samtidig som det gir en god brukeropplevelse.

Eksempel på useTransition:

import { useState, useTransition } from 'react';

function InputComponent() {

 const [isPending, startTransition] = useTransition();
 const [input, setInput] = useState('');

 const handleChange = (e) => {
   const value = e.target.value;
   startTransition(() => {
   setInput(value);
  });
 };

 return (
  <div>
   <input type="text" value={input} onChange={handleChange} />
   {isPending && <p>Laster…</p>}
  </div> 
  );
 } 

I eksemplet ovenfor, når brukeren skriver i input-feltet, vil oppdateringen av input-feltet skje på bakgrunns-tråden uten at det blokkerer UI-en, og React kan vise “Laster…” mens den oppdaterte verdien fortsatt er under behandling.

Les mer om useTransition her

God jul til alle 🤶