Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



28 Commits

Repository files navigation


Single-function alternative for React.useState

npm size Donate


npm add use-st8

Quick example

usest8 is a single function alternative for the useState hook (typically: const [currentValue, updater] = useState(initial)), that combines the current value constant and updater function into a single function.

import * as React from "react";
import { render } from "react-dom";
import { useSt8 } from "use-st8"; // (or) import useSt8 from 'use-st8';

function App() {
  const count = useSt8(0);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={() => count(c => c - 1)}>-</button>
      <button onClick={() => count(c => c + 1)}>+</button>
      <button onClick={() => count(0)}>Reset</button>

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Open the demo in code-sandbox to see it in action


// create a new local state value in a React function component
const count = useSt8(0)

// same, but with initializer function
const count = useSt8(() => 0)

// get the current state

// change the state with to the given value

// update the state using an updater function, that receives the current state and returns the next one
count(c => c + 1)

useSt8 has the same call-signature as the React useState hook. Except, instead of returning a tuple with the current value and a setter, it returns a single function. The function returned can be called in two different ways:

  • With zero arguments. In that case the current state is returned.
  • With one argument. In that case the current state is updated with the given value, or using an updater function, just like the normal useState update function.

That's all.


  • No array destructurings needed, which polute your closures with name pairs, like const [count, setCount] = useState(0). Instead, const count = useSt8(0) just reads nicer. And it saves some characters. Super important. All IMHO 😉.
  • 🚀 Doesn't rely on array destructurings, which are potentially slow as they use the iterator protocol (background). Note that you probably won't notice this in practice, so this is more of a fun fact than an argument to use this.


With useState (offical example):

import { useState } from "react"

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
      Count: {count}
      <button onClick={() => setCount(0)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>

With useSt8:

import { useSt8 } from "use-st8"

function Counter({initialCount}) {
  const count = useSt8(initialCount);
  return (
      Count: {count()}
      <button onClick={() => count(0)}>Reset</button>
      <button onClick={() => count(prevCount => prevCount + 1)}>+</button>
      <button onClick={() => count(prevCount => prevCount - 1)}>-</button>

[sarcasm]Which saves a whooping 21 characters. Now go forth and refactoring all the things![/sarcasm]

The name

useSt8 is a shorter form of useState, which has 8 characters. Also, the pronounciation is pretty similar to "useState".

If you prefer to use with a different name, the useSt8 named export is set as the default export as well.

import useSt8 from 'use-st8';
import useCustomNameSt8 from 'use-st8';


Do you think this cool and useful? Consider buying me a coffee!
Buy Me A Coffee


Single-function alternative for React.useState







No releases published