Better Alternatives to React's useState Hook

Cédric Agoliki — Mon, 23 Jan 2023 21:07:17 +0000

React's way to declare state is interesting, the useState Hook returns you an array of the state and a function to change the state.

The question is, how many times do you need those two elements seperately ?

I mean you always need both, you wouldn't declare the state only to have the setter function, or just the state itself without setter right? If no, why on earth would you do something like that?

Anyway, in this post I want to present two different way to declare the state: I call it the vue-like way and the solid-like way, just because they share some similarities.

The vue-like way

For this let's design the useBetterState() hook:

const useBetterState = (value) => {
  const [state, setState] = useState(value)
  return {
    get value() {
      return state
    },
    set value(v) {
      setState(v)
    }
  }
}

Now that it is defined, we can use it like this

const Counter = () => {
  const count = useBetterState(0)

  const increment = () => {
    count.value++
  }

  return (
    <>
      <div>{count.value}</div>
      <button onClick={increment}>+</button>
    </>
   )
}

So much better Right ?

The solid-like way

I know solid also have a both the state and it's setter separately, but the similarity is in the use of a function to display the state.

const useSuperState = (value) => {
  const [state, setState] = useState(value)
  return function(v) {
    if (v != null) {
      setState(v)
    }
    return state
  }
}

And we can use it this way:

const Counter = () => {
  const count = useSuperState(0)

  const increment = () => {
    count(count() + 1)
  }

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

As you can see, the whole idea of this experiment is to use one variable instead of two to manage a state.

Now before you scream blasphemy, remember this is just an experiment.
And before you write a comment think of me as a violent criminal who knows where you live lol :).

Let me know you thoughts though, I am really curious.

DEV Community: Cédric Agoliki

Better Alternatives to React's useState Hook

The vue-like way

The solid-like way