Awesome
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!<br/><a href="https://www.buymeacoffee.com/mweststrate" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>