Hook za optimizaciju performansi useTransition u React-u

Hook za optimizaciju performansi useTransition omogućava nam ažuriranje stanja bez blokiranja grafičkog interfejsa.

Pomoću ovog hook-a možemo postaviti nizak prioritet ažuriranju bilo kog stanja, što će omogućiti da ažuriranja drugih stanja imaju visok prioritet i izvršavaju se bez kašnjenja.

Kao primer možemo navesti filtriranje padajuće liste proizvoda prilikom unosa simbola od strane korisnika u polje pretrage. Naravno, sama lista se može prikazivati sa određenim kašnjenjem, ali mi ne bismo želeli da se simboli unose u polje pretrage sa kašnjenjem.

Pogledajmo kako nam u takvim slučajevima može pomoći hook useTransition. Pretpostavimo da imamo deo koda glavnog komponenta. Hajde da ga analiziramo:

App.jsximport { useTransition } from 'react';
import { useState } from 'react';

function App() {
  const [isPending, startTransition] = useTransition();
  const [filterTerm, setFilterTerm] = useState('');
  
  const filteredProducts = filterProducts(filterTerm);
  
  function updateFilterHandler(event) {
    startTransition(() => {
      setFilterTerm(event.target.value);
    });
  }
 
  return (
    <div>
      <input type="text" onChange={updateFilterHandler} />
      <ProductList products={filteredProducts} />
    </div>
  );
}

Ovde vidimo dve promenljive za useTransition. Promenljiva isPending sadrži bulovsku vrednost i pokazuje da li je proces ažuriranja završen, a startTransition je funkcija koja omogućava smanjenje prioriteta ažuriranja:

App.jsxconst [isPending, startTransition] = useTransition();

Takođe imamo stanje filterTerm, u kojem se čuva izraz koji se unosi u polje za unos i funkcija setFilterTerm za njegovo postavljanje:

App.jsxconst [filterTerm, setFilterTerm] = useState('');

Prilikom unosa simbola u input, kod nas svaki put poziva funkcija updateFilterHandler, u kojoj se dešava ažuriranje filterTerm. Upravo ovde primenjujemo naš hook useTransition, obavijajući funkciju postavljanja setFilterTerm u startTransition na sledeći način:

App.jsxfunction updateFilterHandler(event) {
  startTransition(() => {
    setFilterTerm(event.target.value);
  });
}

Na ovaj način, postavili smo za ažuriranje stanja filterTerm nizak prioritet i naše polje za unos će ostati odzivno.

Pomoću promenljive isPending mi možemo pokazati korisniku da je ažuriranje liste još u toku. Ispisaćemo tu informaciju ispod polja za unos, dok se lista ažurira:

App.jsxreturn (
  <div>
    <input type="text" onChange={updateFilterHandler} />
    {isPending && <p>Ažuriranje u toku...</p>}
    <ProductList products={filteredProducts} />
  </div>
);