https://github.com/lxsmnsyc/use-dispose
Component-based disposal for React
https://github.com/lxsmnsyc/use-dispose
cancellation cleanup disposable react
Last synced: about 2 months ago
JSON representation
Component-based disposal for React
- Host: GitHub
- URL: https://github.com/lxsmnsyc/use-dispose
- Owner: lxsmnsyc
- License: mit
- Created: 2020-10-26T08:24:20.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-03-20T08:11:26.000Z (about 4 years ago)
- Last Synced: 2025-04-12T12:44:54.262Z (2 months ago)
- Topics: cancellation, cleanup, disposable, react
- Language: TypeScript
- Homepage:
- Size: 766 KB
- Stars: 8
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-dispose
> React hook for running dispose logic for cancelled components.
[](https://www.npmjs.com/package/use-dispose) [](https://github.com/airbnb/javascript)
## Usage
### Install
```bash
yarn add use-dispose
```
### Why?
In Strict mode and Concurrent mode, components may render twice before commit to catch and prevent render-time side-effects. However, since the side-effects scheduled for `useLayoutEffect` and `useEffect` are never called on the first render, there could be unintended leaks like double event registrations from external sources.
`useDispose` attempts to solve this issue by running a registered cleanup for cancelled components, this helps clean and manage leaks that happened on the render phases. `useDispose` only runs for cancelled components and not for components that runs their side-effects successfully.
```tsx
import { useDispose } from 'use-dispose';
// Creates an object with a cleanup logic inside it.
// React may create two instances during Strict and Concurrent Mode
// which can lead to undisposed instances like subscriptions.
const [state] = useState(() => new DisposableObject());
// useDispose guarantees that the object gets disposed when
// the component is cancelled.
useDispose(() => {
state.dispose();
});
// If you want to run disposal only on initial render phase
// You may add "true" as a second argument which toggles
// initial render only cleanup.
useDispose(() => {
state.dispose();
}, true);
```
There's also the `useDisposableMemo` where the produced object from the memoization process which automatically gets disposed when a new object is produced, the component is cancelled or when the component unmounts:
```tsx
import { useDisposableMemo } from 'use-dispose';
// Create a disposable object that is automatically disposed
// on recomputation and on component cancellation/unmount.
const disposableObject = useDisposableMemo(
() => new DisposableObject(deps1, deps2),
(object) => object.dispose(),
[deps1, deps2],
);
```
### Dispose timeouts
`useDispose` and `useDisposableMemo` schedules the dispose callback 5 seconds after the render method is run. You may change this through `setDisposeTimeout`.
## License
MIT © [lxsmnsyc](https://github.com/lxsmnsyc)