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

Menggunakan Vue Reactivity pada Komponen React

Armedi ・ Sep 11 '20 ・ 5 min read

#react #vue3 #vuecompositionapi #vueinreact

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.

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>;
}

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!!!

Comments

[L. Rommy Arbantas]

Sepertinya debugnya nanti susah... Tidak seperti Zustand

[Armedi]

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