Cara Efektif Mengelola State di Aplikasi React

Cara Mengelola State di React: Dari useState hingga Zustand

Estimasi waktu baca: 6 menit

• Pengelolaan state yang efisien sangat penting untuk aplikasi React.
• useState cocok untuk state lokal, sedangkan Zustand lebih tepat untuk state global.
• Prop drilling dapat memperumit pengelolaan data.
• Zustand menawarkan pengelolaan state yang modular dan efisien.
• Pahami kapan menggunakan useState dan kapan Zustand.

Daftar Isi

1. Mengelola State di React
2. useState: State Lokal di Komponen
3. Prop Drilling dan Sharing State
4. Zustand: State Management Global dengan Sederhana
5. Perbandingan useState dengan Zustand
6. Rangkuman
7. FAQ

Mengelola State di React

State di React adalah objek yang dapat memengaruhi bagaimana komponen ditampilkan dan berfungsi. Mengelola state dengan tepat sangat penting untuk menjaga aplikasi agar tetap responsif terhadap interaksi pengguna. Hook useState adalah cara yang paling umum digunakan untuk mengelola state lokal dalam komponen, tetapi saat aplikasi tumbuh dan semakin kompleks, kita mungkin membutuhkan cara yang lebih efisien untuk mengelola state yang digunakan di banyak komponen.

1. useState: State Lokal di Komponen

Fungsi: useState adalah Hook paling dasar di React yang digunakan untuk mendeklarasikan state di fungsi komponen. State ini akan “dipertahankan” antar render, memungkinkan komponen untuk merespon perubahan dengan memperbarui nilai state dan merender ulang bagian yang terpengaruh.

Contoh:

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    setCount(count + 1)}> Clicked {count} times
  );
}

State ini hanya dikelola di dalam komponen tersebut, menjadikannya ideal untuk kebutuhan yang sederhana seperti penghitungan klik atau input form. Sumber.

Karakteristik useState:

• Setiap pemanggilan useState menciptakan “slot” state unik terkait dengan render komponen. Hal ini memungkinkan kita untuk menambahkan beberapa state dalam komponen yang sama dengan lebih fleksibel.
• Sangat cocok untuk menyimpan nilai yang tidak perlu diakses lintas komponen.

2. Prop Drilling dan Sharing State

Masalah: Ketika banyak komponen perlu mengakses atau memperbarui state yang sama, kita sering kali menghadapi apa yang disebut “prop drilling”. Ini terjadi ketika kita harus mengoper state dari komponen atas ke komponen anak, sering kali melalui beberapa lapisan komponen. Situasi ini dapat membuat data lebih sulit dikelola dan memperumit kode.

Solusi: Untuk kebutuhan state lintas komponen, terutama pada aplikasi yang lebih besar, disarankan untuk menggunakan pendekatan manajemen state global seperti Zustand. Sumber.

3. Zustand: State Management Global dengan Sederhana

Fungsi Dasar: Zustand adalah pustaka yang dirancang untuk pengelolaan state global yang mudah dan efisien. Dengan Zustand, kita bisa membuat “store” pusat di mana banyak komponen dapat membaca dan mengubah state tanpa harus mengalami prop drilling. Sumber.

Penggunaan Dasar Zustand:

1. Instalasi pustaka Zustand:

   npm install zustand

2. Menyiapkan store:

   import { create } from 'zustand';
   
   const useStore = create((set) => ({
       count: 0,
       increment: () => set((state) => ({ count: state.count + 1 })),
   }));

3. Mengonsumsi state di komponen:

   function Counter() {
       const { count, increment } = useStore();
   
       return (
           Clicked {count} times
       );
   }

Keunggulan Zustand:

• Modular dan Mudah: Tidak memerlukan boilerplate seperti Redux, hanya dengan membuat hook custom.
• Mendukung Struktur Kompleks: Zustand mendukung state yang bersifat nested dan memungkinkan untuk memperbarui bagian tertentu dari state tanpa memengaruhi bagian lainnya.
• Extensible dengan Middleware: Zustand dapat diintegrasikan dengan middleware untuk debugging, pencatatan perubahan, atau penyimpanan menggunakan localStorage.
• Performant: Hanya komponen yang menggunakan bagian state tertentu yang akan re-render ketika bagian itu berubah, menjadikannya efisien untuk aplikasi besar.

Contoh Struktur Nested dan Middleware

const useStore = create((set) => ({
    user: { name: "", age: 0, address: { street: "", city: "" } },
    updateUser: (newUser) => set((state) => ({ user: { ...state.user, ...newUser } })),
    updateAddress: (newAddress) => set((state) => ({
        user: { ...state.user, address: { ...state.user.address, ...newAddress } },
    })),
}));

Integrasi untuk middleware:

import { devtools } from "zustand/middleware";

const useStore = create(
    devtools((set) => ({
        count: 0,
        increment: () => set((state) => ({ count: state.count + 1 })),
    })),
);

4. Perbandingan useState dengan Zustand

• useState: Ideal untuk mengelola state lokal yang sederhana dan berkaitan langsung dengan satu komponen.
• Zustand: Lebih cocok untuk kebutuhan state global, memungkinkan berbagai komponen untuk berbagi dan memperbarui state dengan efisien, serta sangat baik untuk aplikasi menengah hingga besar yang ingin tetap simple daripada menggunakan Redux.

5. Rangkuman

Di waktu yang tepat, kita bisa memilih antara useState dan Zustand. Gunakan useState untuk state yang sederhana dan terbatas pada komponen, sementara Zustand adalah pilihan sempurna untuk mengelola state global dan scenario yang kompleks. Dengan memahami berbagai cara ini, kamu akan dapat membangun aplikasi React yang lebih responsif dan terkelola dengan baik. Sumber | Sumber.

Bagian FAQ

• Apa itu useState? – useState adalah Hook React untuk mengelola state lokal dalam komponen.
• Kapan sebaiknya menggunakan Zustand? – Zustand sebaiknya digunakan ketika aplikasi membutuhkan akses state yang luas dan kompleks di banyak komponen.
• Apa keunggulan menggunakan Zustand dibandingkan solusi lain? – Zustand lebih sederhana, modular, dan tidak memerlukan boilerplate sebanyak Redux, sambil tetap efisien dalam pengelolaan state global.