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
• updating $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>
}