Back to articles
Valtio Has a Free Proxy-Based State API That Simplifies React

Valtio Has a Free Proxy-Based State API That Simplifies React

via Dev.to ReactAlex Spinov

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

Read Full Article
2 views

Related Articles