Light Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

mweststrate/use-st8

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

28 Commits

Repository files navigation

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.

Hello CodeSandbox

{count()}

); } const rootElement = document.getElementById("root"); render(, rootElement);">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 CodeSandboxh1>
<h2>{count()}h2>
<button onClick={() => count(c => c - 1)}>-button>
<button onClick={() => count(c => c + 1)}>+button>
<button onClick={() => count(0)}>Resetbutton>
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)}>Resetbutton>
<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)}>Resetbutton>
<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!

About

Single-function alternative for React.useState

Resources

Readme

License

MIT license

Stars

Watchers

Forks

Releases

No releases published

Packages

Contributors