
Valtio Has a Free Proxy-Based State API That Simplifies React
Valtio turns plain JavaScript objects into reactive state with zero boilerplate. Just mutate your object — React components re-render automatically. Basic Usage npm install valtio import { proxy , useSnapshot } from ' valtio ' ; const state = proxy ({ count : 0 , todos : [], filter : ' all ' }); function Counter () { const snap = useSnapshot ( state ); return ( < div > < p > Count: { snap . count } </ p > < button onClick = { () => state . count ++ } > +1 </ button > </ div > ); } That is it. No reducers, no actions, no selectors, no context providers. Advanced Patterns Derived State with derive import { derive } from ' valtio/utils ' ; const state = proxy ({ todos : [], filter : ' all ' }); const derived = derive ({ filtered : ( get ) => { const { todos , filter } = get ( state ); if ( filter === ' done ' ) return todos . filter ( t => t . done ); if ( filter === ' pending ' ) return todos . filter ( t => ! t . done ); return todos ; }, count : ( get ) => get ( state ). todos . length
Continue reading on Dev.to React
Opens in a new tab



