Menguasai React `use` Hook: Fondasi Data Fetching Asynchronous dan Rendering Fleksibel

1. Pendahuluan

Dunia pengembangan web terus berevolusi dengan sangat cepat, dan React selalu berada di garis depan inovasi. Salah satu fitur yang paling menarik dan game-changing yang diperkenalkan di React 18+ adalah use hook. Jika Anda sudah terbiasa dengan useState, useEffect, atau useContext, bersiaplah, karena use hook ini membawa cara baru dalam menangani data asynchronous dan rendering komponen.

Pernahkah Anda merasa frustrasi dengan boilerplate yang diperlukan untuk fetching data di React? Atau bagaimana mengelola loading state dan error state agar UI tetap responsif dan informatif? React use hook hadir untuk menyederhanakan tantangan ini, memungkinkan kita untuk “membaca” nilai dari sebuah Promise langsung di dalam komponen React, seolah-olah Promise tersebut sudah selesai dieksekusi. Ini adalah langkah besar menuju arsitektur yang lebih deklaratif dan terintegrasi dengan Suspense, baik untuk client-side maupun server-side rendering.

Artikel ini akan membawa Anda menyelami use hook, dari konsep dasar hingga contoh implementasi praktis. Kita akan melihat bagaimana use hook bekerja, manfaatnya, serta bagaimana ia berinteraksi dengan fitur React modern lainnya seperti Suspense dan Error Boundaries untuk menciptakan pengalaman pengguna yang lebih mulus dan kode yang lebih bersih. Mari kita mulai!

2. Apa Itu React `use` Hook?

Pada intinya, use hook adalah mekanisme baru di React untuk membaca nilai dari sebuah Promise atau dari context yang belum siap. 📌 Fokus utamanya adalah pada Promise. Bayangkan Anda bisa menulis kode fetching data seperti ini:

async function fetchUserData(userId) {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) {
    throw new Error('Gagal mengambil data user');
  }
  return response.json();
}

function UserProfile({ userId }) {
  // ✅ Menggunakan use hook untuk membaca Promise
  const user = use(fetchUserData(userId));

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Terlihat sangat bersih, bukan? Tidak ada useState untuk menyimpan data, tidak ada useEffect untuk memicu fetch, dan yang terpenting, tidak ada manajemen loading state secara manual di dalam komponen itu sendiri. Ini adalah kekuatan use hook.

💡 Perbedaan Utama:

Membaca Promise: use hook dirancang untuk membaca nilai dari Promise yang sudah ada atau sedang berjalan. Ia tidak memicu Promise baru setiap kali render seperti useEffect (tanpa dependensi yang tepat).
Integrasi dengan Suspense: Ketika Promise yang diberikan ke use hook sedang dalam status pending, komponen yang memanggil use akan “menangguhkan” (suspend) rendering-nya. React akan mencari Suspense boundary terdekat di pohon komponen untuk menampilkan fallback UI.
Bekerja dengan Error Boundaries: Jika Promise reject, error akan dilempar ke Error Boundary terdekat, memungkinkan penanganan error secara deklaratif.
Bisa Dipanggil di Dalam Loop atau Kondisional: Berbeda dengan hooks lainnya, use hook bisa dipanggil di dalam kondisi if atau for loop, asalkan React tahu bahwa Promise yang diberikan akan selalu sama untuk render yang sama. Ini karena use tidak bergantung pada urutan panggilan hooks.

3. `use` Hook dan Suspense: Pasangan Serasi untuk Loading State

Salah satu masalah klasik dalam fetching data adalah mengelola loading state. Secara tradisional, kita menggunakan useState dan useEffect untuk:

Menetapkan isLoading menjadi true sebelum fetch.
Menyimpan data ketika fetch berhasil.
Menetapkan isLoading menjadi false setelah selesai (baik berhasil atau gagal).
Menampilkan UI loading secara kondisional.

Dengan use hook, sebagian besar manajemen ini diotomatisasi oleh React melalui integrasi dengan Suspense.

import { Suspense, use } from 'react';

// Fungsi async untuk mengambil data (mengembalikan Promise)
async function fetchData() {
  await new Promise(resolve => setTimeout(resolve, 2000)); // Simulasi delay 2 detik
  return { message: 'Data berhasil diambil!' };
}

function DataDisplay() {
  const data = use(fetchData()); // Panggil use hook dengan Promise
  return <h1>{data.message}</h1>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading data...</div>}>
      <DataDisplay />
    </Suspense>
  );
}

Dalam contoh di atas:

Ketika DataDisplay pertama kali dirender, fetchData() dipanggil, mengembalikan Promise yang pending.
use(fetchData()) akan membuat DataDisplay suspend.
React akan “melompat” ke Suspense boundary terdekat (<Suspense fallback={...}>) dan menampilkan fallback UI (Loading data...).
Setelah Promise fetchData() berhasil resolve (setelah 2 detik), DataDisplay akan melanjutkan rendering-nya dengan nilai data yang sudah tersedia.

Ini adalah cara yang jauh lebih deklaratif dan efisien untuk mengelola loading state, memisahkan logika fetching data dari logika tampilan loading.

4. Penanganan Error dengan `use` Hook dan Error Boundaries

Sama seperti loading state, penanganan error juga menjadi lebih deklaratif dengan use hook dan Error Boundaries. Jika Promise yang diberikan ke use hook reject, use hook akan melemparkan error tersebut, dan React akan mencari Error Boundary terdekat untuk menangkapnya.

import { Suspense, use, useState, useEffect } from 'react';

// Komponen Error Boundary sederhana
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error:", error, errorInfo);
    // Anda bisa log error ke layanan monitoring di sini
  }

  render() {
    if (this.state.hasError) {
      return (
        <div style={{ color: 'red', border: '1px solid red', padding: '10px' }}>
          <h2>Terjadi kesalahan!</h2>
          <p>{this.state.error && this.state.error.message}</p>
          <button onClick={() => this.setState({ hasError: false, error: null })}>Coba lagi</button>
        </div>
      );
    }
    return this.props.children;
  }
}

// Fungsi async yang mungkin gagal
async function fetchRiskyData() {
  await new Promise(resolve => setTimeout(resolve, 1500));
  if (Math.random() > 0.5) { // 50% kemungkinan gagal
    throw new Error('Gagal mengambil data sensitif!');
  }
  return { secret: 'Ini adalah data rahasia!' };
}

function RiskyDataDisplay() {
  const data = use(fetchRiskyData());
  return <p>Data Rahasia: {data.secret}</p>;
}

function AppWithErrors() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Mengambil data rahasia...</div>}>
        <RiskyDataDisplay />
      </Suspense>
    </ErrorBoundary>
  );
}

Dalam skenario ini:

Jika fetchRiskyData() gagal, use hook akan melemparkan error.
ErrorBoundary akan menangkap error tersebut dan menampilkan UI fallback-nya.
Ini memungkinkan Anda untuk mengisolasi error dan mencegah seluruh aplikasi crash, serta memberikan feedback yang lebih baik kepada pengguna.

🎯 Tips Praktis: Selalu sertakan Suspense dan Error Boundary di sekitar komponen yang menggunakan use hook untuk pengalaman pengguna yang optimal dan penanganan error yang robust.

5. `use` Hook dengan React Server Components (RSC)

Salah satu area di mana use hook benar-benar bersinar adalah dengan React Server Components (RSC). RSC memungkinkan Anda untuk merender komponen di server dan mengirimkan HTML yang sudah dirender sebagian atau seluruhnya ke klien. use hook menjadi cara native dan paling efisien untuk fetching data di RSC.

// app/page.js (Contoh Next.js App Router - Server Component)
import { Suspense, use } from 'react';

async function getBlogPost(slug) {
  // Ini akan dieksekusi di server
  const response = await fetch(`https://api.example.com/posts/${slug}`);
  if (!response.ok) {
    throw new Error('Gagal memuat artikel blog');
  }
  return response.json();
}

function BlogPostContent({ slug }) {
  // ✅ use hook membaca Promise yang dibuat di server
  const post = use(getBlogPost(slug));
  return (
    <article>
      <h2>{post.title}</h2>
      <p>{post.author}</p>
      <div>{post.content}</div>
    </article>
  );
}

export default function BlogPostPage({ params }) {
  return (
    <Suspense fallback={<div>Memuat artikel...</div>}>
      <BlogPostContent slug={params.slug} />
    </Suspense>
  );
}

Dalam contoh RSC ini:

getBlogPost adalah fungsi asynchronous yang berjalan di server.
BlogPostContent adalah Server Component yang memanggil use(getBlogPost(slug)).
Ketika getBlogPost sedang fetching data, BlogPostContent akan suspend, dan Suspense di BlogPostPage akan menampilkan fallback-nya.
Setelah data tersedia, React akan melanjutkan rendering dan mengirimkan HTML yang sudah terisi ke browser.

Ini menghilangkan kebutuhan untuk useEffect di client, mengurangi jumlah JavaScript yang dikirim ke browser, dan meningkatkan perceived performance karena pengguna bisa melihat konten lebih cepat.

6. Contoh Nyata dan Best Practices

Mari kita lihat contoh yang lebih kompleks, misalnya mengambil data dari beberapa sumber secara paralel.

import { Suspense, use, ErrorBoundary } from 'react';

async function fetchUserDetails(userId) {
  await new Promise(resolve => setTimeout(resolve, 1000));
  return { id: userId, name: `User ${userId}`, email: `user${userId}@example.com` };
}

async function fetchUserOrders(userId) {
  await new Promise(resolve => setTimeout(resolve, 1500));
  if (userId === 123) { // Contoh user 123 punya error order
      throw new Error("Gagal memuat order untuk user 123");
  }
  return [
    { id: 'O1', product: 'Laptop', amount: 1200 },
    { id: 'O2', product: 'Mouse', amount: 25 },
  ];
}

function UserDashboard({ userId }) {
  // ✅ Ambil data secara paralel
  const userDetailsPromise = fetchUserDetails(userId);
  const userOrdersPromise = fetchUserOrders(userId);

  const user = use(userDetailsPromise);
  const orders = use(userOrdersPromise);

  return (
    <div style={{ border: '1px solid #ccc', padding: '20px', margin: '20px' }}>
      <h3>Dashboard untuk {user.name}</h3>
      <p>Email: {user.email}</p>
      <h4>Daftar Pesanan:</h4>
      <ul>
        {orders.map(order => (
          <li key={order.id}>{order.product} - ${order.amount}</li>
        ))}
      </ul>
    </div>
  );
}

function AppDashboard() {
  const userId = 123; // Coba dengan 123 untuk melihat error
  // const userId = 456; // Coba dengan 456 untuk sukses

  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Memuat dashboard pengguna...</div>}>
        <UserDashboard userId={userId} />
      </Suspense>
    </ErrorBoundary>
  );
}

Dalam contoh ini, kedua Promise (fetchUserDetails dan fetchUserOrders) akan dieksekusi secara paralel. UserDashboard akan suspend hingga kedua Promise tersebut selesai. Jika salah satu gagal (misalnya userId = 123), ErrorBoundary akan menangkapnya.

Best Practices untuk use Hook:

Cache Promise: use hook akan membaca Promise yang Anda berikan. Penting untuk memastikan Promise yang sama diberikan ke use pada setiap render yang konsisten. Jika Anda membuat Promise baru setiap kali render tanpa memoization atau caching, Anda akan terus-menerus memicu suspension dan re-fetching yang tidak perlu.
- Gunakan cache di luar komponen (misalnya di modul terpisah atau di React.cache untuk RSC) untuk menyimpan Promise yang sudah dibuat.
- Atau, pastikan fungsi yang mengembalikan Promise di-memoize dengan baik (useCallback jika Promise bergantung pada props/state).
Gunakan dengan Suspense dan Error Boundaries: Ini adalah trio yang tak terpisahkan. Tanpa keduanya, use hook tidak akan memberikan manfaat yang optimal dan malah bisa menyebabkan aplikasi crash.
Hindari Efek Samping di Fungsi Fetch: Fungsi yang Anda berikan ke use hook (

Menguasai React use Hook: Fondasi Data Fetching Asynchronous dan Rendering Fleksibel

1. Pendahuluan

2. Apa Itu React use Hook?

3. use Hook dan Suspense: Pasangan Serasi untuk Loading State

4. Penanganan Error dengan use Hook dan Error Boundaries

5. use Hook dengan React Server Components (RSC)