use

const value = use(resource);

• Referensi
  • use(resource)
• Penggunaan
  • Membaca context dengan use
  • Men-stream data dari server ke klien
  • Menangani Promise yang ditolak
• Pemecahan masalah
  • “Suspense Exception: This is not a real error!”

Referensi

use(resource)

Panggil use di komponen Anda untuk membaca nilai dari sumber daya seperti Promise atau context.

import { use } from 'react';

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...

Tidak seperti React Hooks, use dapat dipanggil di dalam loop dan pernyataan kondisional seperti if. Seperti React Hooks, fungsi yang memanggil use harus berupa Komponen atau Hook.

Saat dipanggil dengan Promise, API use terintegrasi dengan Suspense dan batas kesalahan. Komponen yang memanggil use akan tersuspensi selama Promise yang diberikan ke use masih tertunda. Jika komponen yang memanggil use dibungkus dalam batas Suspense, tampilan cadangan akan ditampilkan. Setelah Promise diselesaikan, tampilan cadangan Suspense digantikan oleh komponen yang dirender menggunakan data yang dikembalikan oleh API use. Jika Promise yang diberikan ke use ditolak, tampilan cadangan dari batas kesalahan terdekat akan ditampilkan.

Lihat lebih banyak contoh di bawah ini.

Parameter

• resource: ini adalah sumber data tempat Anda ingin membaca nilai. Sumber daya bisa berupa Promise atau context.

Nilai kembali

API use mengembalikan nilai yang dibaca dari sumber daya seperti nilai hasil penyelesaian dari Promise atau context.

Catatan

• API use harus dipanggil di dalam Komponen atau Hook.
• Saat mengambil data di Server Component, gunakan async dan await sebagai pilihan utama dibanding use. async dan await melanjutkan perenderan dari titik ketika await dipanggil, sedangkan use merender ulang komponen setelah data terselesaikan.
• Lebih disarankan membuat Promise di Server Components dan meneruskannya ke Client Components daripada membuat Promise di Client Components. Promise yang dibuat di Client Components dibuat ulang pada setiap perenderan. Promise yang diteruskan dari Server Component ke Client Component stabil di seluruh perenderan ulang. Lihat contoh ini.

Penggunaan

Membaca context dengan use

Saat context diberikan ke use, perilakunya mirip dengan useContext. Sementara useContext harus dipanggil di level teratas komponen Anda, use dapat dipanggil di dalam kondisional seperti if dan loop seperti for. use lebih disarankan daripada useContext karena lebih fleksibel.

import { use } from 'react';

function Button() {
  const theme = use(ThemeContext);
  // ...

use mengembalikan nilai context untuk context yang Anda berikan. Untuk menentukan nilai context, React menelusuri pohon komponen dan menemukan penyedia context terdekat di atasnya untuk context tersebut.

Untuk memberikan context ke Button, bungkus Button atau salah satu komponen induknya ke dalam penyedia context yang sesuai.

function MyPage() {
  return (
    <ThemeContext value="dark">
      <Form />
    </ThemeContext>
  );
}

function Form() {
  // ... tampilkan buttons di dalam ...
}

Tidak masalah berapa banyak lapisan komponen di antara penyedia dan Button. Saat Button di mana pun di dalam Form memanggil use(ThemeContext), nilai yang diterima adalah "dark".

Tidak seperti useContext, use dapat dipanggil di dalam kondisional dan loop seperti if.

function HorizontalRule({ show }) {
  if (show) {
    const theme = use(ThemeContext);
    return <hr className={theme} />;
  }
  return false;
}

use dipanggil dari dalam pernyataan if, sehingga Anda bisa membaca nilai dari Context secara kondisional.

Men-stream data dari server ke klien

Data dapat di-stream dari server ke klien dengan meneruskan Promise sebagai prop dari Server Component ke Client Component.

import { fetchMessage } from './lib.js';
import { Message } from './message.js';

export default function App() {
  const messagePromise = fetchMessage();
  return (
    <Suspense fallback={<p>menunggu pesan...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

Client Component kemudian mengambil Promise yang diterima sebagai prop dan meneruskannya ke API use. Ini memungkinkan Client Component membaca nilai dari Promise yang awalnya dibuat oleh Server Component.

// message.js
'use client';

import { use } from 'react';

export function Message({ messagePromise }) {
  const messageContent = use(messagePromise);
  return <p>Berikut adalah pesannya: {messageContent}</p>;
}

Karena Message dibungkus dalam Suspense, tampilan cadangan akan ditampilkan sampai Promise terselesaikan. Ketika Promise terselesaikan, nilai akan dibaca oleh API use dan komponen Message akan menggantikan tampilan cadangan Suspense.

export default async function App() {
  const messageContent = await fetchMessage();
  return <Message messageContent={messageContent} />
}

Menangani Promise yang ditolak

Dalam beberapa kasus Promise yang diberikan ke use bisa ditolak. Anda dapat menangani Promise yang ditolak dengan salah satu cara berikut:

1. Menampilkan kesalahan kepada pengguna dengan batas kesalahan.
2. Memberikan nilai alternatif dengan Promise.catch

Menampilkan kesalahan kepada pengguna dengan batas kesalahan

Jika Anda ingin menampilkan kesalahan kepada pengguna saat Promise ditolak, Anda bisa menggunakan batas kesalahan. Untuk menggunakan batas kesalahan, bungkus komponen tempat Anda memanggil API use dengan batas kesalahan. Jika Promise yang diberikan ke use ditolak, tampilan cadangan untuk batas kesalahan akan ditampilkan.

Memberikan nilai alternatif dengan Promise.catch

Jika Anda ingin memberikan nilai alternatif ketika Promise yang diberikan ke use ditolak, Anda dapat menggunakan metode catch pada Promise.

import { Message } from './message.js';

export default function App() {
  const messagePromise = new Promise((resolve, reject) => {
    reject();
  }).catch(() => {
    return "tidak ada pesan baru yang ditemukan.";
  });

  return (
    <Suspense fallback={<p>menunggu pesan...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

Untuk menggunakan metode catch pada Promise, panggil catch pada objek Promise. catch menerima satu argumen: sebuah fungsi yang menerima pesan kesalahan sebagai argumen. Apa pun yang dikembalikan oleh fungsi yang diberikan ke catch akan digunakan sebagai nilai hasil penyelesaian dari Promise.

Pemecahan masalah

“Suspense Exception: This is not a real error!”

Anda memanggil use di luar Komponen React atau fungsi Hook, atau memanggil use di dalam blok try-catch. Jika Anda memanggil use di dalam blok try-catch, bungkus komponen Anda dengan batas kesalahan, atau panggil catch pada Promise untuk menangkap kesalahan dan menyelesaikan Promise dengan nilai lain. Lihat contoh ini.

Jika Anda memanggil use di luar Komponen React atau fungsi Hook, pindahkan pemanggilan use ke Komponen React atau fungsi Hook.

function MessageComponent({messagePromise}) {
  function download() {
    // ❌ Fungsi yang memanggil `use` bukan Komponen atau Hook.
    const message = use(messagePromise);
    // ...

Sebagai gantinya, panggil use di dalam komponen, yaitu ketika fungsi yang memanggil use adalah Komponen atau Hook.

function MessageComponent({messagePromise}) {
  // ✅ `use` dipanggil di dalam Komponen.
  const message = use(messagePromise);
  // ...