ฮุก use() สำหรับทรัพยากรแบบอะซิงก์

ยินดีต้อนรับ

use() คืออะไร

import { use } from 'react';

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

การส่ง Promise เป็น Props

// 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() เทียบกับ useEffect สำหรับข้อมูล

use() สำหรับ Context

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

การจัดการข้อผิดพลาดด้วย ErrorBoundary

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

ใช้ use() เฉพาะในคอมโพเนนต์ฝั่งไคลเอนต์

การแคช Promise

การสตรีมด้วย use()

React.cache() สำหรับการลดการเรียกซ้ำ

ตรวจสอบความเข้าใจอย่างรวดเร็ว

สรุปทบทวน

ถัดไป