BFE.dev
buy us
a coffee
CompanyListsDiscuss
buy us
a coffee
React Coding Questions13. proxy-state valtio

13. proxy-state valtio

React
Share

  - accepted / - tried

valtio claims to make proxy-state simple.

Let's take a look at the basic example.


import { proxy, useSnapshot } from 'valtio'

const state = proxy({ count: 0, text: 'hello' })

// This will re-render on `state.count` change 
// but not on `state.text` change
function Counter() {
  const snap = useSnapshot(state)
  return (
    <div>
      {snap.count}
      <button onClick={() => ++state.count}>
        +1
      </button>
    </div>
  )
}

// you can mutate the state from anywhere
setInterval(() => {
  ++state.count
}, 1000)

Now you are asked to implement proxy() and useSnapshot() to make above code example work.

This question is NOT to re-implement valtio, rather it is to test your understanding of proxy-state. The test cases on BFE.dev only covers the basic usage of above two functions, not the full abilities of valtio.

prevnext

Bugfree ordinary solution is better than buggy fancy ones.

(2)

Try it out

Console