valtio_counter_quickstart_proxy_state_with_useSnapshot.ts

1import { proxy, useSnapshot } from 'valtio'
2
3// Create a proxy state
4const state = proxy({ count: 0, text: 'hello' })
5
6function Counter() {
7  // Snapshots are read-only and reactive
8  const snap = useSnapshot(state)
9  
10  return (
11    <div>
12      {snap.count}
13      <button onClick={() => ++state.count}>+1</button>
14    </div>
15  )
16}
17
18function TextField() {
19  const snap = useSnapshot(state)
20  
21  return (
22    <div>
23      {snap.text}
24      <input
25        value={snap.text}
26        onChange={(e) => (state.text = e.target.value)}
27      />
28    </div>
29  )
30}
31
32export default function App() {
33  return (
34    <>
35      <Counter />
36      <TextField />
37    </>
38  )
39}