use-st8

by mweststrate

mweststrate / use-st8

Single-function alternative for React.useState

194 Stars 3 Forks Last release: Not found MIT License 11 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

use-st8

Single-function alternative for React.useState

npm size Donate

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 (

Hello CodeSandbox

{count()}

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

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} setCount(0)}>Reset setCount(prevCount => prevCount + 1)}>+ setCount(prevCount => prevCount - 1)}>- > ); }

With

useSt8
:
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

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!
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.