Need help with use-st8?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

204 Stars 5 Forks MIT License 22 Commits 1 Opened issues


Single-function alternative for React.useState

Services available


Need anything else?

Contributors list


Single-function alternative for React.useState

npm size Donate


npm add use-st8

Quick example

is a single function alternative for the
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 (

Hello CodeSandbox


count(c => c - 1)}>- count(c => c + 1)}>+ count(0)}>Reset
); }

const rootElement = document.getElementById("root"); render(, 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 count()

// change the state with to the given value count(0)

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

has the same call-signature as the React
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
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.



(offical example):
import { useState } from "react"

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


import { useSt8 } from "use-st8"

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

[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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.