Is the useSnapshot() section of the README out of date?

[theyak]

I've come across a couple of issues with the README in the useSnapshot() section, which is, of course, an essential section for the use of Valtio.

There's a comment in the code sample that reads:

// This will re-render on `state.count` change but not on `state.text` change

However, there is no state.text in the actual example. Should this be fixed?

The other issue I've found is with:

const snap = useSnapshot(state);

It later talks about using snap for optimization. However, if I just use the original state object, rendering is actually going faster for me in a small and stupid test I made up just to play with Valtio. It can be found at https://codesandbox.io/s/adoring-cori-mcv7ow?file=/src/App.js:970-985. Changing references from snap to state in the App() function makes the app appear to run about 20% faster on my computer. Doesn't make any real world difference, I just found it interesting and opposite of what the README says to do. Are there some places that one should use snap and others one should use state in the render process?

[dai-shi]

However, there is no state.text in the actual example. Should this be fixed?

state.text isn't used, thus it doesn't re-render. I think the example is correct.

It later talks about using snap for optimization.

In our context, optimization refers to render optimization, which is to avoid extra re-renders. It's not about optimization in general.

However, if I just use the original state object, rendering is actually going faster for me in a small and stupid test I made up just to play with Valtio. It can be found at https://codesandbox.io/s/adoring-cori-mcv7ow?file=/src/App.js:970-985. Changing references from snap to state in the App() function makes the app appear to run about 20% faster on my computer.

It's probably because it subscribes the whole state and doesn't track usage.
Essentially, it's same as using subscribe() and useState, which is more lightweight.

Are there some places that one should use snap and others one should use state in the render process?

Using snap will optimize re-renders. If it's not your goal, using state might be appropriate.

valtio/docs/how-tos/how-to-avoid-rerenders-manually.mdx

Lines 18 to 27 in 3c92092

	## Reading state is valid but not recommended for general use cases
	```jsx
	const Component = () => {
	const { count } = state // this is not reactive
	return <>{count}</>
	}
	```
	This will not trigger re-render, but it doesn't follow the react rule like with any other global variables.