react-hook-use-state
Version:
useState() with confidence
62 lines (38 loc) • 2.45 kB
Markdown
# react-hook-use-state
 [](https://travis-ci.org/we-code-now/react-hook-use-state) [](https://www.codacy.com/app/StevenTea/react-hook-use-state?utm_source=github.com&utm_medium=referral&utm_content=we-code-now/react-hook-use-state&utm_campaign=Badge_Grade) [](https://www.codacy.com/app/StevenTea/react-hook-use-state?utm_source=github.com&utm_medium=referral&utm_content=we-code-now/react-hook-use-state&utm_campaign=Badge_Coverage)  
useState() with confidence!
## Table of Contents
- [Motivation](#motivation)
- [Disclaimer](#disclaimer)
- [Installation](#installation)
- [Usage](#usage)
- [Demo](#demo)
- [License](#license)
## Motivation
Sometimes, we accidentally try to update state on an unmounted React component. And then we get a warning like this:
```text
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
```
With `react-hook-use-state`, you can use `useState()` hook with confidence.
## Disclaimer
This package is based on React lifecycle hooks and don't update state if React component is unmounted.
[BUT ... THIS APPROACH IS AN ANTIPATTERN. CLICK HERE TO READ MORE!](https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html)
I strongly encourage all asynchronous tasks should be cleaned up when React component is unmounted. But if you don't mind for some reason, this solution is for you :)
## Installation
```shell
$ npm install --save react-hook-use-state
```
## Usage
- Similar to official `useState()`, super easy!
```js
import useState from 'react-hook-use-state';
function Counter() {
const [count, setCount] = useState(0);
// your code here
}
```
## Demo
Website: <https://wecodenow-react-hook-use-state.stackblitz.io>
Playground: <https://stackblitz.com/edit/wecodenow-react-hook-use-state>
## License
MIT