useShallow for Valtio

[kirankunigiri]

I used Zustand for several projects, and decided to give Valtio a try. I'm really enjoying it so far because of the mutable state model, but I'm missing the useShallow feature from Zustand. Being able to avoid re-renders based on whether the result of a computation changes or not was extremely handy. Is there a way to do this in Valtio?

Here is a specific example I am dealing with. I have several items, and I want them to re-render when they are clicked on and selected.
In Zustand, with useShallow, the component will only re-render if isSelected changes, instead of every time selectedItem changes.

const isSelected = useMainStore(useShallow((state) => state.selectedItem === props.item.id));

How would I do this in Valtio?

[dai-shi]

By the way, you don't need useShallow in Zustand,

const isSelected = useMainStore((state) => state.selectedItem === props.item.id);

is fine. Don't overuse useShallow.

[dai-shi]

This should help:

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

Lines 29 to 46 in 9593184

	## Subscribe and set local state conditionally
	```jsx
	const Component = () => {
	const [count, setCount] = useState(state.count)
	useEffect(
	() =>
	subscribe(state, () => {
	if (state.count % 2 === 0) {
	// conditionally update local state
	setCount(state.count)
	}
	}),
	[],
	)
	return <>{count}</>
	}
	```