Suorituskyvyn optimointihook useDeferredValue Reactissa

Suorituskyvyn optimointihook useDeferredValue, aivan kuten useTransitionkin, auttaa nopeuttamaan graafisen käyttöliittymän toimintaa, mutta tekee sen hieman eri tavalla.

Katsokaa edellistä oppituntia ja katsokaa, kuinka useTransition:n tapauksessa käärimme setFilterTerm päivitysfunktion. No, tilan päivityskoodi ei aina ole saatavilla. Se voi olla piilotettu, esimerkiksi käyttämässäsi kirjastossa. Tässä tapauksessa voimme hyödyntää useDeferredValue -hookkia. Silloin meidän täytyy kääriä joko itse tila tai tällä tilalla laskettu tulos, alentaen sen prioriteettia.

Analysoidaan seuraavaa lasten komponentin ProductList koodinpätkää:

ProductList.jsximport {useDeferredValue} from 'react'

function ProductList({ products }) {
  const deferredProducts = useDeferredValue(products);
  
  return (
    <ul>
      {deferredProducts.map((product) => (
        <li>{product}</li>
      ))}
    </ul>
  );
}

Huomaa, että tässä käärimme useDeferredValue:llä itse products -muuttujan, jonka saimme komponentin propsista. Sitten tallensimme tuloksen muuttujaan deferredProducts, joka on se, jota käytämme eteenpäin:

ProductList.jsxconst deferredProducts = useDeferredValue(products);

Jos nyt pääkomponentin koodinpätkässä, jota tarkastelimme edellisellä oppitunnilla, poistamme rivin:

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

Ja rivin, jossa käytetään isPending:ia:

App.jsx{isPending && <p>päivitetään ...</p>}

Ja poistamme kääreen funktion setFilterTerm ympäriltä, saamme saman tuloksen kuin edellisellä oppitunnilla:

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