123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
---title: 'How to avoid rerenders manually'---
# How to avoid rerenders manually
## `useSnapshot` optimizes re-renders automatically
This is the basic usage.
```jsxconst Component = () => {  const { count } = useSnapshot(state) // this is reactive  return <>{count}</>}```
## Reading state is valid but not recommended for general use cases
```jsxconst 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
```jsxconst 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.
```jsxconst 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}</>}```