Blogger Jateng
Home / Tutorial

Jotai: Pendekatan Minimalis untuk Manajemen Negara yang Bereaksi

Manajemen state adalah aspek penting dalam membangun aplikasi React yang efisien dan terukur. Secara tradisional, para pengembang mengandalkan solusi seperti Redux, Context API, dan Recoil untuk mengelola state secara efektif. Namun, solusi-solusi ini sering kali rumit dan memperkenalkan kode boilerplate yang tidak perlu. Masuklah ke Jotai - sebuah library manajemen state yang minimalis namun kuat untuk React yang menyederhanakan cara pengembang menangani state.

Apa itu Jotai?

Jotai (bahasa Jepang untuk atom) adalah pustaka manajemen state yang menggunakan prinsip-prinsip state atom untuk memungkinkan state dikelola dengan lebih lancar dan digunakan dengan cara yang terukur. Jotai dibangun oleh tim di balik Zustand dan React Three Fiber, Poimandres, sehingga mereka telah belajar dari masa lalu mereka untuk memberikan sesuatu yang baru, tanpa semua kerumitan yang tidak perlu yang Anda harapkan dari manajemen state dengan tetap menjaga integritas dan kegunaan.

Tidak seperti alat manajemen state tradisional yang membutuhkan pengaturan dan pengurangan yang ekstensif, Jotai menawarkan cara yang mudah untuk mendefinisikan dan memanipulasi state menggunakan atom. Atom-atom ini bertindak sebagai bagian individual dari state yang dapat dibagikan di seluruh komponen tanpa perlu pengeboran prop atau penyedia konteks.

sumber: soshace.com

Fitur-fitur Utama Jotai

  1. Pelat Boiler Minimal: Jotai menghilangkan kebutuhan akan reduksi, jenis tindakan, dan fungsi pengiriman dan menyediakan implementasi yang lebih intuitif dan lebih mudah untuk manajemen state Anda.
  2. Status Berbasis Atom: Setiap bagian dari state dienkapsulasi dalam sebuah atom, menjadikannya modular dan mudah dibagikan di seluruh komponen.
  3. Status yang Diturunkan: Membuat nilai yang dihitung dari atom saat ini akan menyebabkan setiap state diperbarui, menjadikannya inti dari sebuah aplikasi.
  4. Manajemen Status Asinkron: Jotai menangani pembaruan state asinkron secara langsung, memungkinkan integrasi yang mulus antara panggilan API dan efek samping tanpa memerlukan middleware tambahan.
  5. Performa yang Dioptimalkan: Karena Jotai hanya merender ulang komponen yang menggunakan atom tertentu, rendering yang tidak perlu dapat diminimalkan, sehingga menghasilkan kinerja aplikasi yang lebih baik.

Memulai dengan Jotai

Jotai sudah terinstal di dalam proyek React Anda karena fungsi berikut ini digunakan dengan sendirinya:

npm install jotai

Membuat dan Menggunakan Atom

Tulang Punggung JotaiMengapa menggunakan atom? Atom adalah sebuah unit tunggal dari state. Berikut adalah cara membuat dan menggunakan atom:

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Untuk hal ini, contoh mendefinisikan countAtom yang merupakan atom yang diinisialisasi dengan 0. Hook useAtom memungkinkan komponen untuk secara langsung membaca dan memperbarui state atom.

Keadaan yang Diturunkan

Jotai mendukung computed state melalui turunan atom. Contoh pembuatan state turunan dapat terlihat seperti ini:

const doubleCountAtom = atom((get) => get(countAtom) * 2);

function DisplayDoubleCount() {
  const [doubleCount] = useAtom(doubleCountAtom);
  return <p>Double Count: {doubleCount}</p>;
}

Dalam kasus ini, doubleCountAtom mendapatkan nilainya dari countAtom, jadi jika countAtom diperbarui, doubleCountAtom juga akan diperbarui dan tidak akan di-render ulang.

Penanganan Status Asinkronisasi

Di Jotai, state asinkron ditangani dengan cara yang mudah. Ini adalah cara kita mengambil data dengan atom asinkron:

const fetchUserAtom = atom(async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  return response.json();
});

function UserComponent() {
  const [user] = useAtom(fetchUserAtom);
  return <p>User: {user?.name}</p>;
}

Karena tidak memiliki middleware, atom ini mengambil data secara asinkron, sehingga Anda dapat langsung berintegrasi dengan API yang baru Anda buat.

Mengapa Kita Harus Menggunakan Jotai Daripada Cara Lain untuk Mengelola Negara?

Jotai bekerja karena sederhana dan masuk akal. Sebagai contoh, alih-alih membutuhkan reduksi dan aksi seperti yang Anda lakukan dengan Redux, Anda cukup mengelola state dengan satu baris kode menggunakan Jotai. Jotai melakukan ini dengan melacak struktur atom, bukan API Konteks dan merender ulang seluruh penyedia konteks. Selain itu, meskipun Jotai memiliki ukuran bundel yang lebih kecil, penanganan state turunan dan asinkronisasinya bisa jauh lebih baik daripada Recoil, menjadikannya alternatif yang solid.

Kesimpulan

Jotai menawarkan pendekatan yang minimalis namun kuat untuk manajemen state React. Dengan model state atomiknya, kemudahan penggunaan, dan pengoptimalan kinerja, Jotai menyediakan alternatif yang sangat baik untuk solusi manajemen state tradisional. Baik Anda sedang mengerjakan proyek kecil atau aplikasi berskala besar, Jotai dapat membantu menyederhanakan manajemen state dan meningkatkan alur kerja pengembangan Anda. Jika Anda mencari cara yang ringan dan efisien untuk mengelola state di React, Jotai layak untuk dijelajahi.