npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

use-st8

v1.1.0

Published

Single-function alternative for React.useState hook

Downloads

49

Readme

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