revelte
v0.4.2
Published
`$state()` and `$effect()` for react
Downloads
292
Readme
revelte
$state()
and $effect()
for react
import type {} from 'revelte'
function App() {
let count = $state(0)
$effect(() => {
console.log(`count: ${count}`)
})
return <div onClick={() => count += 1}>{count}</div>
}
Setup
npm create vite@latest my-react-app -- --template react-swc-ts
cd my-react-app
npm i -D revelte
in vite.config.ts
add revelte
as a plugin:
export default defineConfig({
plugins: [react({plugins: [['revelte', {}]]})],
})
npm run dev
When will state be updated
- reassigning $state variables, like
count = newVal
- mutating object $state variables, like
foo.bar = newVal
import type {} from 'revelte'
function App() {
let count = $state({value: 0})
return <div onClick={() => count.value += 1}>{count.value}</div>
}
- mutating arrays, including
push
,pop
,unshift
,shift
,splice
,fill
,reverse
,sort
andcopyWithin
- always operate directly on the original $state object, otherwise state won't change
Instead of:
let state = $state({count: 1})
const {count} = state
count += 1
Use:
state.count += 1
How does it work
Code are rewritten to use useState
and useEffect
, so there is almost no runtime overhead.