Valtio Has a Free API — Here's How to Use Proxy-Based State in React

Valtio is a proxy-based state management library for React that makes state as simple as mutating a regular JavaScript object. No reducers, no actions, no boilerplate. What is Valtio? Valtio wraps your state object in a JavaScript Proxy. When you mutate the proxy, React components that subscribe to it automatically re-render. It's the most intuitive state management approach available. Quick Start npm install valtio import { proxy , useSnapshot } from ' valtio ' ; const state = proxy ({ count : 0 , todos : [], }); function Counter () { const snap = useSnapshot ( state ); return ( < div > < p > Count : { snap . count } < /p > < button onClick = {() => state . count ++ } > Increment < /button > < /div > ); } Notice how you just mutate state.count++ — no dispatch, no setter function, no action creator. Derived State with derive import { derive } from ' valtio/utils ' ; const derived = derive ({ doubled : ( get ) => get ( state ). count * 2 , todoCount : ( get ) => get ( state ). todos . l