DEV Community

Armedi
Armedi

Posted on

React Proxy-State dengan Valtio

Dari pengalaman saya mengajar fullstack web development, banyak sekali murid yang bilang bahwa mereka lebih enjoy menggunakan Vue daripada React. Dan salah satu penyebabnya adalah karena manipulasi state di React tidak senyaman di Vue (Ini menurut beberapa orang yang pernah saya tanya).

Berangkat dari hal itu, sekitar 3 bulan yang lalu saya menulis artikel tentang bagaimana menggunakan library Vue reactivity di React

Ide dasarnya adalah tentang bagaimana menggunakan state yang mutable pada React. Dan waktu itu saya menggunakan library @vue/reactivity.

@vue/reactivity ini pada dasarnya menggunakan Proxy untuk change detection. Yaitu proses bagaimana perubahan state dideteksi dan kemudian men-trigger update pada UI menyesuaikan dengan state terbaru.

Dan jujur saja ketika library ini saya pakai di React, code yang dibuat tidak menjadi lebih sederhana dan lebih mudah dipahami dibandingkan menggunakan bawaan dari React seperti useState hook. Tapi idenya sendiri (mutable state di React) saya yakin sangat sangat legit.

Nah di artikel ini saya akan bahas sebuah library baru yang lagi ngehits.

GitHub logo pmndrs / valtio

💊 Valtio makes proxy-state simple for React and Vanilla

Pada waktu tulisan ini dibuat, valtio baru berumur sepuluh hari semenjak versi 0.1 dirilis namun telah memperoleh sebanyak 1,2k stars di github. Suatu pertanda baik bahwa library ini punya masa depan yang sangat cerah, hehe.

Di bawah ini adalah contoh resmi dari githubnya valtio. Di sini kamu liat betapa simpelnya cara penggunaannya

Benar gampang kan?

import { proxy, useProxy } from 'valtio';

const state = proxy({ number: 0 });

function Figure() {
  const snapshot = useProxy(state);

  return <div className="figure">{snapshot.number}</div>;
}
Enter fullscreen mode Exit fullscreen mode

State valtio bebas kamu mau mutate dimana saja, dan bahkan sudah support Suspense.

Langsung aja kamu bisa cek githubnya di https://github.com/pmndrs/valtio untuk melihat fitur-fitur keren apa aja yang tersedia.

Semoga berguna!!!

Top comments (2)

Collapse
 
rommyarb profile image
L. Rommy Arbantas • Edited

Sepertinya debugnya nanti susah... Tidak seperti Zustand

Collapse
 
armedi profile image
Armedi

kalau melihat ke dokumentasinya untuk debug juga bisa menggunakan redux devtools sama kayak zustand, tapi memang saya belum coba