Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mweststrate/use-st8
Single-function alternative for React.useState
https://github.com/mweststrate/use-st8
Last synced: 29 days ago
JSON representation
Single-function alternative for React.useState
- Host: GitHub
- URL: https://github.com/mweststrate/use-st8
- Owner: mweststrate
- License: mit
- Created: 2019-01-02T18:48:21.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-11T21:39:57.000Z (over 1 year ago)
- Last Synced: 2024-10-31T03:05:12.914Z (about 1 month ago)
- Language: TypeScript
- Size: 806 KB
- Stars: 234
- Watchers: 6
- Forks: 7
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - use-st8 - Single-function alternative for React.useState (TypeScript)
- awesome-list - use-st8 - function alternative for React.useState | mweststrate | 211 | (TypeScript)
README
# use-st8
Single-function alternative for React.useState
[](https://www.npmjs.com/package/use-st8) [](http://img.badgesize.io/https://unpkg.com/[email protected]/lib/index.mjs) [](https://www.paypal.me/michelweststrate)
# 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.
```javascript
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](https://codesandbox.io/s/q9q7yrxjkj) to see it in action
# API
```javascript
// 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`](https://reactjs.org/docs/hooks-state.html) 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](https://reactjs.org/docs/hooks-reference.html#functional-updates).
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](https://docs.google.com/document/d/1hWb-lQW4NSG9yRpyyiAA_9Ktytd5lypLnVLhPX9vamE/edit)). 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](https://reactjs.org/docs/hooks-reference.html#functional-updates)):
```javascript
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`:
```javascript
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.
```javascript
import useSt8 from 'use-st8';
import useCustomNameSt8 from 'use-st8';
```
# Cool?
Do you think this cool and useful? Consider buying me a coffee!
