Recoil dan Zustand: Alternatif Lebih Santuy - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Redux Terlalu Ribet? Coba yang Lebih Santuy!

Redux memang powerful, tapi banyak yang merasa terlalu "drama" karena terlalu banyak aturan. Kalau cuma mau ngatur state tanpa pusing dengan reducer, action, dan boilerplate yang panjang, ada alternatif yang lebih simpel: Recoil dan Zustand!

2. Recoil: State Management ala React

Recoil dikembangkan langsung oleh tim Facebook (sekarang Meta), jadi cara kerjanya sangat selaras dengan React.

Kelebihan Recoil

 Simpel, nggak perlu reducer dan action.  State bisa langsung digunakan di komponen.  Bisa pakai selector untuk state yang lebih kompleks.  Built-in support untuk async state.

Cara Pakai Recoil

1. Install dulu:

   npm install recoil
   

2. Bungkus aplikasi dengan RecoilRoot:

   import { RecoilRoot } from "recoil";
   import App from "./App";
   
   function Root() {
     return (
       <RecoilRoot>
         <App />
       </RecoilRoot>
     );
   }
   

3. Buat Atom (State Global-nya):

   import { atom } from "recoil";
   
   export const counterState = atom({
     key: "counterState",
     default: 0,
   });
   

4. Gunakan di Komponen:

   import { useRecoilState } from "recoil";
   import { counterState } from "./store";
   
   function Counter() {
     const [count, setCount] = useRecoilState(counterState);
     return (
       <div>
         <h2>Count: {count}</h2>
         <button onClick={() => setCount(count + 1)}>Tambah</button>
         <button onClick={() => setCount(count - 1)}>Kurang</button>
       </div>
     );
   }
   

Simpel, kan? Mirip useState, tapi bisa dipakai di seluruh aplikasi!

3. Zustand: State Management Super Simpel

Zustand adalah state management yang lebih fleksibel dan ringan dibandingkan Redux atau Recoil.

Kelebihan Zustand

Tanpa provider! Bisa langsung dipakai di mana saja.  API sederhana, mirip useState tapi bisa global.  State tetap tersimpan meskipun komponen di-unmount.  Bisa dipakai di luar React (misalnya di vanilla JS).

Cara Pakai Zustand

1. Install dulu:

   npm install zustand
   

2. Buat Store:

   import { create } from "zustand";
   
   const useCounterStore = create((set) => ({
     count: 0,
     increment: () => set((state) => ({ count: state.count + 1 })),
     decrement: () => set((state) => ({ count: state.count - 1 })),
   }));
   

3. Gunakan di Komponen:

   function Counter() {
     const { count, increment, decrement } = useCounterStore();
     return (
       <div>
         <h2>Count: {count}</h2>
         <button onClick={increment}>Tambah</button>
         <button onClick={decrement}>Kurang</button>
       </div>
     );
   }
   

Tidak perlu Provider, action, atau reducer yang ribet!

4. Recoil vs Zustand vs Redux, Pilih Mana?

Fitur	Redux	Recoil	Zustand
Kompleksitas	Tinggi	Sedang	Rendah
Boilerplate	Banyak	Sedikit	Sangat Sedikit
Async Support	Perlu Middleware	Native	Native
Ukuran Bundle	Besar	Sedang	Kecil
Provider	Wajib	Wajib	Tidak Perlu
Ekosistem	Luas	Masih berkembang	Baru berkembang

 Pakai Redux kalau aplikasi besar dan butuh struktur yang ketat.  Pakai Recoil kalau ingin state management yang lebih terintegrasi dengan React.  Pakai Zustand kalau mau cara termudah dan paling fleksibel.

5. Kesimpulan

 Redux bagus, tapi tidak selalu pilihan terbaik.  Recoil menawarkan solusi yang lebih modern untuk state management React.  Zustand adalah opsi yang lebih ringan dan fleksibel.  Pilih sesuai dengan kebutuhan proyek dan tingkat kompleksitas aplikasi!

Kalau pengen ngatur state tanpa drama, Recoil dan Zustand bisa jadi solusi lebih santuy!