React Academy · Oppitunti

use()-hook asynkronisille resursseille

Lukekaa promiseja ja contexteja renderöinnin aikana React 19:n use()-hookilla.

Oppitunti 2/413 vaihetta

use()-hook asynkronisille resursseille on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Tervetuloa

Tällä oppitunnilla käytätte React 19:n use()-hookia promisejen ja kontekstiarvojen lukemiseen suoraan renderöintifunktion sisällä, mikä yksinkertaistaa asynkronisten tietojen käyttöä.

Mikä use() on?

use() on React 19:n hook, joka lukee resurssin — joko Promisen tai Contextin — synkronisesti renderöintifunktiossa. Jos Promise on vielä kesken, komponentti keskeyttää renderöinnin ja lähin Suspense-raja näyttää varasisällön.

import { use } from 'react';

function UserProfile({ userPromise }) {
  const user = use(userPromise); // suspends if pending
  return <h1>{user.name}</h1>;
}

Promisejen välittäminen propseina

React 19:n yleinen toimintamalli on seuraava: Server Component luo Promisen (esimerkiksi tietokantakyselyn), välittää sen Client Componentille, ja Client Component lukee sen use()-hookilla. Suspense-raja voi sijaita missä tahansa ylempänä komponenttihierarkiassa.

// Server Component
export default function Page() {
  const userPromise = fetchUser(1); // NOT awaited
  return (
    <Suspense fallback={<Spinner />}>
      <Profile userPromise={userPromise} />
    </Suspense>
  );
}

// Client Component
'use client';
export function Profile({ userPromise }) {
  const user = use(userPromise);
  return <p>{user.name}</p>;
}

use() ja useEffect tiedonhakuun

Tiedon hakeminen useEffectillä edellyttää loading- ja error-tilojen manuaalista hallintaa. use()-hook yhdessä Suspensen kanssa poistaa tämän toistuvan pohjakoodin — komponentin runko lukee tiedot aivan kuin ne olisivat synkronisia.

use() Contextille

use() voi lukea myös kontekstiarvoja aivan kuten useContext. Erona on, että use()-hookia voi kutsua ehtolauseissa ja silmukoissa, toisin kuin useContextia, jonka on noudatettava Hookien sääntöjä.

import { use } from 'react';
import { ThemeContext } from './ThemeContext';

function Button({ danger }) {
  if (danger) {
    const theme = use(ThemeContext); // conditional — allowed with use()!
    return <button style={{ color: theme.red }}>Delete</button>;
  }
  return <button>Click</button>;
}

Virheiden käsittely ErrorBoundarylla

Jos use()-hookille välitetty Promise hylätään, React heittää virheen. Käärikää komponentti ErrorBoundaryn sisään, jotta voitte ottaa virheen kiinni ja näyttää varasisällön.

<ErrorBoundary fallback={<Error />}>
  <Suspense fallback={<Loading />}>
    <Profile userPromise={fetchUser(id)} />
  </Suspense>
</ErrorBoundary>

use() vain Client Components -komponenteissa

Promisen kanssa käytettävä use() toimii Client Components -komponenteissa. Server Components -komponenteissa käyttäkää suoraan async/awaitia — palvelimella use()-hookia ei tarvita Promisejen käsittelyyn.

Promisejen välimuistitus

Jos komponentti renderöidään uudelleen, sen on saatava sama Promise-viite uudelleenhaun välttämiseksi. Luokaa Promiset komponentin ulkopuolella tai vakaassa sijainnissa (palvelimella, välimuistissa tai tilassa) ja välittäkää ne propseina.

Suoratoisto use()-hookilla

Kun yhdistätte use()-hookin suoratoistavaan SSR:ään, React voi suoratoistaa sivun HTML:n, näyttää Suspensen varasisällön ja suoratoistaa ratkaistun sisällön heti Promisen valmistuttua — kaikki yhden HTTP-yhteyden aikana.

React.cache() deduplikointiin

Palvelimella React.cache() (tai Next.js:n unstable_cache) deduplikoi saman asynkronisen funktion useat kutsut yhden renderöinnin aikana, joten tietokantaan tehdään kysely vain kerran, vaikka useat komponentit käyttäisivät samaa promisea.

Pikatarkistus

Mitä Client Component tekee, kun use(promise) kutsutaan ja promise on vielä kesken?

Vastaa interaktiivisessa oppitunnissa

Kertaus

use(promise) lukee asynkroniset tiedot synkronisesti renderöinnin aikana ja keskeyttää renderöinnin, jos tiedot ovat vielä latautumassa. use(context) toimii ehdollisesti toisin kuin useContext. Käyttäkää aina Suspensea lataustilan ja ErrorBoundarya virheiden käsittelyyn.

Seuraavaksi

Seuraava oppitunti: **React Actions ja useActionState** — määrittelette palvelin- ja asiakastoimintoja sekä käsittelette lomakkeiden lähetyksiä odotustilan avulla.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”use()-hook asynkronisille resursseille” ilmainen?

Kyllä – oppitunnin ”use()-hook asynkronisille resursseille” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”use()-hook asynkronisille resursseille”?

Lukekaa promiseja ja contexteja renderöinnin aikana React 19:n use()-hookilla. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”use()-hook asynkronisille resursseille”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: React Academy