why using snapshots in callbacks is a bad idea?

[giladv]

https://github.com/pmndrs/eslint-plugin-valtio#snapshots-in-callbacks-are-not-recommended
This example makes no sense to me. how can it be stale?
If the state changes the component will re-render which in turn create a new handleClick with the latest snapshot.

would love to get a better explanation. thanks

[dai-shi]

Thanks for raising this up.
Yeah, the problem is not reading stale value, but it's about state usage tracking.

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

function App() {
  const snap = useSnapshot(state)
  const handleClick = () => {
    console.log(snap.text) // This is not recommended as it can cause extra re-renders
  }
  return (
    <div>
      {snap.count} <button onClick={handleClick}>click</button> 
    </div>
  )
}

Once, you click the button, the useSnapshot hook can mistake that text is used in render, which may cause re-render if text changes. snap is really meant to be used only in render function.

[dai-shi]

Yeah, this is one of the most confusing things in valtio. I explained wrongly at the beginning too.
snap is basically for reading within React (in render function).
Outside react, reading can be state. (and, is recommended because there are no pitfalls.)

  const handleClick = () => {
    console.log(snap.text)
  }

☝️ this is "valid", it almost means 👇

  const text = snap.text
  const handleClick = () => {
    console.log(text)
  }

and sometimes it makes sense.

There are many valid patterns, but to ease educating the usage, we have recommended patterns. And, that's what eslint-plugin-valtio is for.

[MD2990]

That's great explanation, I will revalidate my code using eslint as I'm using something like
state.arr = snsp.arr.fillter(r=>r.name!=="abc")

[dai-shi]

Good. Please note that eslint-plugin-valtio is still young, and expect some bugs. Feel free to report issues.

[jorroll]

Followup question: when using Valtio outside of React, is it also a bad idea to use snapshot inside an event listener?

For example:

import { proxy, snapshot } from "valtio";

const state = proxy({ username: "jorroll" });

function myCallback() {
  const snap = snapshot(state);
  console.log("username", snap.username);
}

window.addEventListener("keydown", myCallback);

If it is a bad idea to use snapshot here, would it be acceptable to just access the proxy directly for reading? Or is there any solution/pattern for accessing valtio state inside a callback?

For example:

import { proxy } from "valtio";

const state = proxy({ username: "jorroll" });

function myCallback() {
  console.log("username", state.username);
}

window.addEventListener("keydown", myCallback);

[dai-shi]

If it is a bad idea to use snapshot here, would it be acceptable to just access the proxy directly for reading? Or is there any solution/pattern for accessing valtio state inside a callback?

Inside event callbacks, reading from the proxy directly is perfectly fine, and alternatively you can use snapshot if you need an immutable object from the proxy.