trubavuong / react-hook-use-state

useState() with confidence!

react-hook-use-state

useState() with confidence!

Table of Contents

• Motivation
• Disclaimer
• Installation
• Usage
• Demo
• License

Motivation

Sometimes, we accidentally try to update state on an unmounted React component. And then we get a warning like this:

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!

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

$ npm install --save react-hook-use-state

Usage

• Similar to official useState(), super easy!

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