How should i use state in callbacks

[Slebee]

"We shouldn't use snapshots in callbacks, because snapshots can be stale there."

so. how should i use state in callbacks?

[dai-shi]

You can just use the proxy state.

const handleClick = () => {
  ++state.count
}

I hope I didn't misunderstand your question.

[Slebee]

in eslint-plugin-valtio：

const state = proxy({ count: 0 })

function App() {
  const snap = useSnapshot(state)
  const handleClick = () => {
    console.log(snap.count) // This is not recommended as it can be stale.
  }
  return (
    <div>
      {snap.count} <button onClick={handleClick}>click</button> 
    </div>
  )
}

i want console snap.count，What do you recommend？

[Slebee]

ok, i saw https://github.com/pmndrs/valtio/discussions/290#discussioncomment-1743617，but it really confusing.

[dai-shi]

i want console snap.count，What do you recommend？

If you really want to console.log snap.count, destructure in render function.

const state = proxy({ count: 0 })

function App() {
  const snap = useSnapshot(state)
  const count = snap.count
  const handleClick = () => {
    console.log(count) // This is fine
  }
  return (
    <div>
      {count} <button onClick={handleClick}>click</button> 
    </div>
  )
}

Yes, it is confusing. This is the hardest part of educating valtio.