README

use-st8

Single-function alternative for React.useState

Installation

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>
      <h2>{count()}</h2>
      <button onClick={() => count(c => c - 1)}>-</button>
      <button onClick={() => count(c => c + 1)}>+</button>
      <button onClick={() => count(0)}>Reset</button>
    </div>
  );
}

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

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

API

// 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)

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.

Benefits

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.

Example

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';

Cool?

Do you think this cool and useful? Consider buying me a coffee!

Usage no npm install needed!