A useTransition teljesítményoptimalizáló hook a React-ben

A useTransition teljesítményoptimalizáló hook lehetővé teszi számunkra, hogy a state-eket frissítsük anélkül, hogy blokkolnánk a felhasználói felületet.

Ezzel a hookkal alacsonyabb prioritást rendelhetünk egy state frissítéséhez, ami lehetővé teszi, hogy más state-ek frissítései magas prioritással rendelkezzenek és késleltetés nélkül hajtódjanak végre.

Példaként említhetjük egy terméklistának a szűrését, miközben a felhasználó karaktereket ír be a keresőmezőbe. Természetesen maga a lista megjelenhet valamilyen késéssel, de szeretnénk elkerülni, hogy a karakterek a keresőmezőbe késéssel jelenjenek meg.

Nézzük meg, hogyan segíthet ebben az esetben a useTransition hook. Tegyük fel, hogy van egy kódrészletünk a fő komponensben. Elemezzük meg:

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

Itt két változót látunk a useTransition számára. A isPending változó logikai értéket tartalmaz, és azt mutatja, befejeződött-e a frissítési folyamat, míg a startTransition egy függvény, amely lehetővé teszi a frissítés prioritásának csökkentését:

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

Van továbbá egy filterTerm state-ünk, amely a bemeneti mezőbe írt kifejezést tárolja, valamint egy setFilterTerm függvény annak beállításához:

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

Amikor karaktereket írunk be a bemeneti mezőbe, minden alkalommal meghívódik a updateFilterHandler függvény, amelyben a filterTerm frissül. Itt alkalmazzuk a useTransition hookunkat, becsomagolva a setFilterTerm beállító függvényt a startTransition függvénybe a következő módon:

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

Így alacsony prioritást állítottunk be a filterTerm state frissítéséhez, és a bemeneti mezőnk reagálékony marad.

A isPending változó segítségével jelezhetjük a felhasználónak, hogy a lista frissítése még folyamatban van. Jelenítsük meg ezt az információt a bemeneti mező alatt, amíg a lista frissül:

App.jsxreturn (
  <div>
    <input type="text" onChange={updateFilterHandler} />
    {isPending && <p>frissítés folyamatban ...</p>}
    <ProductList products={filteredProducts} />
  </div>
);