1 September 2025Bahasa Indonesia

Jelajahi hook useActionState dari React untuk manajemen state yang disederhanakan yang dipicu oleh aksi asinkron. Tingkatkan efisiensi dan pengalaman pengguna aplikasi Anda.

Implementasi React useActionState: Manajemen State Berbasis Aksi

Hook useActionState dari React, yang diperkenalkan dalam versi terbaru, menawarkan pendekatan yang lebih baik untuk mengelola pembaruan state yang dihasilkan dari aksi asinkron. Alat yang kuat ini menyederhanakan proses penanganan mutasi, memperbarui UI, dan mengelola state error, terutama saat bekerja dengan React Server Components (RSC) dan server actions. Panduan ini akan menjelajahi seluk-beluk useActionState, memberikan contoh praktis dan praktik terbaik untuk implementasinya.

Memahami Kebutuhan Manajemen State Berbasis Aksi

Manajemen state React tradisional sering kali melibatkan pengelolaan state loading dan error secara terpisah di dalam komponen. Ketika sebuah aksi (misalnya, mengirimkan form, mengambil data) memicu pembaruan state, pengembang biasanya mengelola state ini dengan beberapa panggilan useState dan logika kondisional yang berpotensi kompleks. useActionState menyediakan solusi yang lebih bersih dan lebih terintegrasi.

Pertimbangkan skenario pengiriman form sederhana. Tanpa useActionState, Anda mungkin memiliki:

Variabel state untuk data form.
Variabel state untuk melacak apakah form sedang dikirim (state loading).
Variabel state untuk menampung pesan error apa pun.

Pendekatan ini dapat menyebabkan kode yang bertele-tele dan potensi inkonsistensi. useActionState mengonsolidasikan masalah ini ke dalam satu hook, menyederhanakan logika dan meningkatkan keterbacaan kode.

Memperkenalkan useActionState

Hook useActionState menerima dua argumen:

Fungsi asinkron ("aksi") yang melakukan pembaruan state. Ini bisa berupa server action atau fungsi asinkron lainnya.
Nilai state awal.

Hook ini mengembalikan sebuah array yang berisi dua elemen:

Nilai state saat ini.
Sebuah fungsi untuk mengirimkan aksi. Fungsi ini secara otomatis mengelola state loading dan error yang terkait dengan aksi tersebut.

Berikut adalah contoh dasarnya:


import { useActionState } from 'react';

async function updateServer(prevState, formData) {
  // Mensimulasikan pembaruan server asinkron.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     return 'Gagal memperbarui server.';
  }

  return `Nama diperbarui menjadi: ${data.name}`;
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateServer, 'State Awal');

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await dispatch(formData);
    console.log(result);
  }

  return (
    
      Nama:
      
      
      State: {state}
    
  );
}

Dalam contoh ini:

updateServer adalah aksi asinkron yang mensimulasikan pembaruan server. Aksi ini menerima state sebelumnya dan data form.
useActionState menginisialisasi state dengan 'State Awal' dan mengembalikan state saat ini serta fungsi dispatch.
Fungsi handleSubmit memanggil dispatch dengan data form. useActionState secara otomatis menangani state loading dan error selama eksekusi aksi.

Menangani State Loading dan Error

Salah satu manfaat utama dari useActionState adalah manajemen bawaannya untuk state loading dan error. Fungsi dispatch mengembalikan sebuah promise yang akan resolve dengan hasil dari aksi tersebut. Jika aksi tersebut melempar error, promise akan reject dengan error tersebut. Anda dapat menggunakan ini untuk memperbarui UI yang sesuai.

Modifikasi contoh sebelumnya untuk menampilkan pesan loading dan pesan error:


import { useActionState } from 'react';
import { useState } from 'react';

async function updateServer(prevState, formData) {
  // Mensimulasikan pembaruan server asinkron.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     throw new Error('Gagal memperbarui server.');
  }

  return `Nama diperbarui menjadi: ${data.name}`;
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateServer, 'State Awal');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    setIsSubmitting(true);
    setErrorMessage(null);

    try {
      const result = await dispatch(formData);
      console.log(result);
    } catch (error) {
      console.error("Error saat pengiriman:", error);
      setErrorMessage(error.message);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      Nama:
      
      
      {isSubmitting && Loading...}
      {errorMessage && Error: {errorMessage}}
      State: {state}
    
  );
}

Perubahan utama:

Kami menambahkan variabel state isSubmitting dan errorMessage untuk melacak state loading dan error.
Di dalam handleSubmit, kami mengatur isSubmitting menjadi true sebelum memanggil dispatch dan menangkap error apa pun untuk memperbarui errorMessage.
Kami menonaktifkan tombol submit saat proses pengiriman dan menampilkan pesan loading serta error secara kondisional.

useActionState dengan Server Actions di React Server Components (RSC)

useActionState bersinar saat digunakan dengan React Server Components (RSC) dan server actions. Server actions adalah fungsi yang berjalan di server dan dapat langsung memutasi sumber data. Mereka memungkinkan Anda untuk melakukan operasi sisi server tanpa menulis endpoint API.

Catatan: Contoh ini memerlukan lingkungan React yang dikonfigurasi untuk Server Components dan Server Actions.


// app/actions.js (Server Action)
'use server';

import { cookies } from 'next/headers'; //Contoh, untuk Next.js

export async function updateName(prevState, formData) {
  const name = formData.get('name');

  if (!name) {
    return 'Silakan masukkan nama.';
  }

  try {
    // Mensimulasikan pembaruan database.
    await new Promise(resolve => setTimeout(resolve, 1000));

    cookies().set('userName', name);

    return `Nama diperbarui menjadi: ${name}`; //Berhasil!

  } catch (error) {
    console.error("Pembaruan database gagal:", error);
    return 'Gagal memperbarui nama.'; // Penting: Kembalikan pesan, bukan melempar Error
  }
}


// app/page.jsx (React Server Component)
'use client';

import { useActionState } from 'react';
import { updateName } from './actions';

function MyComponent() {
  const [state, dispatch] = useActionState(updateName, 'State Awal');

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await dispatch(formData);
    console.log(result);
  }

  return (
    
      Nama:
      
      
      State: {state}
    
  );
}

export default MyComponent;

Dalam contoh ini:

updateName adalah server action yang didefinisikan di app/actions.js. Ia menerima state sebelumnya dan data form, memperbarui database (disimulasikan), dan mengembalikan pesan sukses atau error. Sangat penting, aksi ini mengembalikan pesan daripada melempar error. Server Actions lebih memilih mengembalikan pesan yang informatif.
Komponen ditandai sebagai komponen klien ('use client') untuk menggunakan hook useActionState.
Fungsi handleSubmit memanggil dispatch dengan data form. useActionState secara otomatis mengelola pembaruan state berdasarkan hasil dari server action.

Pertimbangan Penting untuk Server Actions

Penanganan Error di Server Actions: Alih-alih melempar error, kembalikan pesan error yang bermakna dari Server Action Anda. useActionState akan memperlakukan pesan ini sebagai state baru. Ini memungkinkan penanganan error yang baik di sisi klien.
Optimistic Updates: Server actions dapat digunakan dengan optimistic updates untuk meningkatkan persepsi kinerja. Anda dapat memperbarui UI segera dan mengembalikannya jika aksi gagal.
Revalidasi: Setelah mutasi berhasil, pertimbangkan untuk merevalidasi data yang di-cache untuk memastikan UI mencerminkan state terbaru.

Teknik Lanjutan useActionState

1. Menggunakan Reducer untuk Pembaruan State yang Kompleks

Untuk logika state yang lebih kompleks, Anda dapat menggabungkan useActionState dengan fungsi reducer. Ini memungkinkan Anda mengelola pembaruan state dengan cara yang dapat diprediksi dan mudah dipelihara.


import { useActionState } from 'react';
import { useReducer } from 'react';

const initialState = {
  count: 0,
  message: 'State Awal',
};

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'SET_MESSAGE':
      return { ...state, message: action.payload };
    default:
      return state;
  }
}

async function updateState(state, action) {
  // Mensimulasikan operasi asinkron.
  await new Promise(resolve => setTimeout(resolve, 500));

  switch (action.type) {
    case 'INCREMENT':
      return reducer(state, action);
    case 'DECREMENT':
      return reducer(state, action);
    case 'SET_MESSAGE':
      return reducer(state, action);
    default:
      return state;
  }
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateState, initialState);

  return (
    
      Jumlah: {state.count}
      Pesan: {state.message}
      
      
      
    
  );
}

2. Optimistic Updates dengan useActionState

Optimistic updates meningkatkan pengalaman pengguna dengan segera memperbarui UI seolah-olah aksi berhasil, dan kemudian mengembalikan pembaruan jika aksi gagal. Ini dapat membuat aplikasi Anda terasa lebih responsif.


import { useActionState } from 'react';
import { useState } from 'react';

async function updateServer(prevState, formData) {
  // Mensimulasikan pembaruan server asinkron.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     throw new Error('Gagal memperbarui server.');
  }

  return `Nama diperbarui menjadi: ${data.name}`;
}

function MyComponent() {
  const [name, setName] = useState('Nama Awal');
  const [state, dispatch] = useActionState(async (prevName, newName) => {
    try {
      const result = await updateServer(prevName, {
        name: newName,
      });
      return newName; // Perbarui saat berhasil
    } catch (error) {
      // Kembalikan saat error
      console.error("Pembaruan gagal:", error);
      setName(prevName);
      return prevName;
    }
  }, name);

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const newName = formData.get('name');
    setName(newName); // Perbarui UI secara optimis
    await dispatch(newName);
  }

  return (
    
      Nama:
      
      
      Nama Saat Ini: {name}
      State: {state}
    
  );
}

3. Debouncing Aksi

Dalam beberapa skenario, Anda mungkin ingin melakukan debounce pada aksi untuk mencegahnya dikirim terlalu sering. Ini bisa berguna untuk skenario seperti input pencarian di mana Anda hanya ingin memicu aksi setelah pengguna berhenti mengetik selama periode tertentu.


import { useActionState } from 'react';
import { useState, useEffect } from 'react';

async function searchItems(prevState, query) {
  // Mensimulasikan pencarian asinkron.
  await new Promise(resolve => setTimeout(resolve, 500));

  return `Hasil pencarian untuk: ${query}`;
}

function MyComponent() {
  const [query, setQuery] = useState('');
  const [state, dispatch] = useActionState(searchItems, 'State Awal');

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (query) {
        dispatch(query);
      }
    }, 300); // Debounce selama 300ms

    return () => clearTimeout(timeoutId);
  }, [query, dispatch]);

  return (
    
      Cari:
       setQuery(e.target.value)}
      />
      State: {state}
    
  );
}

Praktik Terbaik untuk useActionState

Jaga Aksi Tetap Murni (Pure): Pastikan aksi Anda adalah fungsi murni (atau sedekat mungkin). Aksi tersebut tidak boleh memiliki efek samping selain memperbarui state.
Tangani Error dengan Baik: Selalu tangani error dalam aksi Anda dan berikan pesan error yang informatif kepada pengguna. Seperti yang disebutkan di atas dengan Server Actions, lebih baik mengembalikan string pesan error dari server action, daripada melempar error.
Optimalkan Kinerja: Perhatikan implikasi kinerja dari aksi Anda, terutama saat berurusan dengan kumpulan data yang besar. Pertimbangkan untuk menggunakan teknik memoization untuk menghindari render ulang yang tidak perlu.
Pertimbangkan Aksesibilitas: Pastikan aplikasi Anda tetap dapat diakses oleh semua pengguna, termasuk mereka yang memiliki disabilitas. Sediakan atribut ARIA dan navigasi keyboard yang sesuai.
Pengujian Menyeluruh: Tulis unit test dan integration test untuk memastikan aksi dan pembaruan state Anda berfungsi dengan benar.
Internasionalisasi (i18n): Untuk aplikasi global, terapkan i18n untuk mendukung berbagai bahasa dan budaya.
Lokalisasi (l10n): Sesuaikan aplikasi Anda dengan lokal tertentu dengan menyediakan konten, format tanggal, dan simbol mata uang yang dilokalkan.

useActionState vs. Solusi Manajemen State Lainnya

Meskipun useActionState menyediakan cara yang mudah untuk mengelola pembaruan state berbasis aksi, ini bukanlah pengganti untuk semua solusi manajemen state. Untuk aplikasi kompleks dengan state global yang perlu dibagikan di antara banyak komponen, pustaka seperti Redux, Zustand, atau Jotai mungkin lebih sesuai.

Kapan menggunakan useActionState:

Pembaruan state dengan kompleksitas sederhana hingga sedang.
Pembaruan state yang terkait erat dengan aksi asinkron.
Integrasi dengan React Server Components dan Server Actions.

Kapan mempertimbangkan solusi lain:

Manajemen state global yang kompleks.
State yang perlu dibagikan di antara sejumlah besar komponen.
Fitur lanjutan seperti time-travel debugging atau middleware.

Kesimpulan

Hook useActionState dari React menawarkan cara yang kuat dan elegan untuk mengelola pembaruan state yang dipicu oleh aksi asinkron. Dengan mengonsolidasikan state loading dan error, ini menyederhanakan kode dan meningkatkan keterbacaan, terutama saat bekerja dengan React Server Components dan server actions. Memahami kekuatan dan keterbatasannya memungkinkan Anda memilih pendekatan manajemen state yang tepat untuk aplikasi Anda, yang mengarah pada kode yang lebih mudah dipelihara dan efisien.

Dengan mengikuti praktik terbaik yang diuraikan dalam panduan ini, Anda dapat secara efektif memanfaatkan useActionState untuk meningkatkan pengalaman pengguna dan alur kerja pengembangan aplikasi Anda. Ingatlah untuk mempertimbangkan kompleksitas aplikasi Anda dan memilih solusi manajemen state yang paling sesuai dengan kebutuhan Anda. Dari pengiriman form sederhana hingga mutasi data yang kompleks, useActionState dapat menjadi alat yang berharga dalam persenjataan pengembangan React Anda.