Can declare state inside components?

[happy-little-one]

this is the regluar way to daclare the store:

const store = proxy({count: 0})
export defalut () => {
  const {count} = useSnapshot(store)
}

well, in this way, the store is shared, every component instance use the same store. I want use valtio the manange the local store like useState. way don't just useState ? useState is hard to use, verbose, need immutable...If valtio has a way to manage local state, I think I will giveup react hooks at all ! if valtio has not yet, I think it is really worth achieving!

[dai-shi]

It's technically possible to create a component state, for example:

export defalut () => {
  const store = useRef(proxy({count: 0})).current
  const {count} = useSnapshot(store)
}

However, it doesn't feel like a best practice, because a) we often don't need render optimization for local states and b) state branching doesn't work with external stores. So, we don't document this usage explicitly.

If your requirements is mutable style updating, use-immer is a good option.

[happy-little-one]

I have previewed use-immer, to much template codes, and doesn't support async-data data like valtio.

the api I am expecting is:

export default () => {
 let { count } = useLocal({ count: 1 })

return <button onClick={ () => count += 1}>{count}</button>
}

but this is not nessary, useState is still an option. I think what I am expecting is a framework which isolate the ui and the state, is there anything similar ?

[dai-shi]

Just in case, have you tried jotai?

[happy-little-one]

jotai still need to be immutable, in that way, I will choose useState.

[liuyike98]

make a hook like this:

function useValtio<T extends object>(data: T) {
  const proxyState = useRef(proxy<T>(data)).current;
  return [useSnapshot(proxyState), proxyState] as [Readonly<T>, T];
}

use hook:

function App() {
  const [state, proxyState] = useValtio({ count: 0 });
  return (
    <div className="App">
      <div>{state.count}</div>
      <button
        onClick={() => {
          proxyState.count++;
          console.log(proxyState.count);
        }}
      >
        add
      </button>
    </div>
  );
}

[erwinheldy]

Another alternative:

import { useRef } from 'react'
import { proxy } from 'valtio'
import { useProxy } from 'valtio/utils'

function useValtio<T extends object>(data: T) {
  const state = useRef(proxy<T>(data)).current
  return useProxy(state)
}

function App() {
  const counter = useValtio({
    count: 0,
    get doubled() {
      return this.count * 2
    },
    increment() {
      counter.count++
    },
  })
  return (
    <button onClick={counter.increment}>Counter: {counter.count} * 2 = {counter.doubled}</button>
  )
}