How to avoid rerenders manually
useSnapshot
optimizes re-renders automatically
This is the basic usage.
const Component = () => {
const { count } = useSnapshot(state) // this is reactive
return <>{count}</>
}
Reading state is valid but not recommended for general use cases
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.
Subscribe and set local state conditionally
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}</>
}
This should work mostly.
Theoretically, state can be changed before the subscription. A fix would be the following.
const Component = () => {
const [count, setCount] = useState(state.count)
useEffect(() => {
const callback = () => {
if (state.count % 2 === 0) {
// conditionally update local state
setCount(state.count)
}
}
const unsubscribe = subscribe(state, callback)
callback()
return unsubscribe
}), [])
return <>{count}</>
}