DEV Community

Armedi
Armedi

Posted on

1

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

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More