https://github.com/myckhel/use-react-state
react useState is now more intelligent
https://github.com/myckhel/use-react-state
functional-components react react-state react-use-state reactjs use-state
Last synced: 11 months ago
JSON representation
react useState is now more intelligent
- Host: GitHub
- URL: https://github.com/myckhel/use-react-state
- Owner: myckhel
- Created: 2021-06-05T15:35:59.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-10-03T08:58:01.000Z (over 2 years ago)
- Last Synced: 2025-03-10T17:04:20.176Z (11 months ago)
- Topics: functional-components, react, react-state, react-use-state, reactjs, use-state
- Language: JavaScript
- Homepage: https://github.com/myckhel/use-react-state#use-react-state
- Size: 1.45 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# use-react-state
> managing state in react is now more intelligent.
[](https://www.npmjs.com/package/use-react-state) [](https://standardjs.com)
## Overview
`use-react-state` is an advanced implementation of [React's useState](https://reactjs.org/docs/react-component.html#setstate)
It gives almost the same and more functionality as [React's useState](https://reactjs.org/docs/react-component.html#setstate).
### Using Reacts useState
😢😭😿
```jsx
import { useState } from 'react'
function Component(){
const [first, setFirst] = useState(1)
const [second, setSecond] = useState(2)
const [third, setThird] = useState(3)
const [fourth, setFourth] = useState(4)
const changeFirstAndSecond = () => {
setFirst(10)
setSecond(20)
// 2x re-render
}
const resetState = () => {
setFirst(1)
setSecond(2)
setThird(3)
setFourth(4)
// 4x re-render
}
}
```
## Using `use-react-state` as useState replacement.
😊😃😺😄
```jsx
import useState from 'use-react-state'
function Component(){
const [state, setState] = useState({
first: 1,
second: 2,
third: 3,
fourth: 4,
})
const changeFirstAndSecond = () => {
setState({
first: 10,
second: 20,
})
// 1x re-render
}
const resetState = () => {
setState({
first: 1,
second: 2,
third: 3,
fourth: 4,
})
// 1x re-render
}
}
```
## Install
```bash
yarn add use-react-state
```
## Usage
```js
import React from 'react'
import useState from 'use-react-state'
const App = () => {
const [state, setState] = useState({ nine: 9 })
return (
Nine: is {state.nine}
setState(({ nine }) => ({ nine: nine + 1 }))}>
Increaae state.nine by 1
)
}
```
## APIs
### useState
> is a Hook that lets you add React state to function components.
#### @params
- | name | description | type |
| ------------------- | --------------------- | ----- |
| **`initialState?`** | state's initial state | `any` |
#### @return
- type `array`
- - `state` | current state value | `any`
- - [setState](#setState) | function to update the state | `function`
- - `stateRef` | state reference | `object`
```js
import useState from 'use-react-state'
const [state, setState, stateRef] = useState(initialState)
```
### setState
> function to update the state.
> setState is an intelligent setter function which guesses how you intends to update an existing state.
> When array is passed as the new state, it assumes you will append the newState array with the current state if current state is an array else it replaces the state. same goes for objects.
#### @params
- | name | description | type |
| ------------------------ | ----------------------------------- | ----- |
| **`newState\|callback`** | new state to set or setter callback | `any` |
#### using setState
Given the 1st example below, setState will merge new state object with existing state given that existing state is an object.
```js
import useState from 'use-react-state'
const [state, setState, stateRef] = useState({ foo: 'foo' })
// merge state object
setState({ bar: 'bar' }) // {foo: 'foo', bar: 'bar'}
// replace state
setState('foo') // 'foo'
// replace state
setState(['foo']) // ['foo']
// push state array
setState(['bar']) // ['foo', 'bar']
// custom state setter
setState((existingDraftState) => {
return ['baz']
}) // ['baz']
```
#### using setState's [immer produce feature](https://immerjs.github.io/immer/produce)
setState uses immer's produce feature for state mutation.
Your are not limited to using the functionality as well.
```js
import useState from 'use-react-state'
const [state, setState] = useState({ foo: 'foo' })
// custom state setter with immer feature
setState((existingDraftState) => {
existingDraftState.bar = 'bar'
}) // {foo: 'foo', bar: 'bar'}
```
## License
MIT © [myckhel](https://github.com/myckhel)