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
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.
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!!!
Top comments (2)
Sepertinya debugnya nanti susah... Tidak seperti Zustand
kalau melihat ke dokumentasinya untuk debug juga bisa menggunakan redux devtools sama kayak zustand, tapi memang saya belum coba