---title: 'Component State'section: 'Advanced'description: 'Isolate component state with useRef'---
# Component State
To isolate component state for reusability, Valtio must live in the React lifecycle. You can wrap a `proxy` in a ref, passing it with props or context.
```jsximport { createContext, useContext } from 'react'import { proxy, useSnapshot } from 'valtio'
const MyContext = createContext()
const MyProvider = ({ children }) => { const state = useRef(proxy({ count: 0 })).current return <MyContext.Provider value={state}>{children}</MyContext.Provider>}
const MyCounter = () => { const state = useContext(MyContext) const snap = useSnapshot(state) return ( <> {snap.count} <button onClick={() => ++state.count}>+1</button> </> )}```
## Codesandbox example
https://codesandbox.io/s/valtio-component-ye5tbg?file=/src/App.tsx
## Alternatives
If you are not happy with useRef usage, consider:
- [use-constant](https://www.npmjs.com/package/use-constant)- [bunshi](https://www.bunshi.org/recipes/valtio/)- You may also create custom hooks wrapping useContext and optionally useSnapshot.### Bunshi example
https://codesandbox.io/s/77r53c?file=/molecules.ts