@ptolemy2002/react-mount-effects
v1.2.1
Published
Dedicated effect functions for React component mount and unmount
Downloads
2
Readme
React Mount Effects
React allows useEffect(() => {callback()}, [])
to run the callback only on first mount, thus useEffect(() => callback, [])
only runs on unmounting. However, eslint often complains about this. This library manually suppresses those warnings and exports the hooks for convenience sake.
The hooks are not exported as default, so you can import in one of the following ways:
//ES6
import { useMountEffect, useUnmountEffect, useDelayedEffect } from '@ptolemy2002/react-mount-effects';
//CommonJS
const { useMountEffect, useUnmountEffect, useDelayedEffect } = require('@ptolemy2002/react-mount-effects');
The example for this library purposefully does not run in strict mode, as doing so allows more clear demonstration of exactly when each hook runs (console logs are run only once and there aren't any extraneous mounts/unmounts).
Hooks
The following hooks are available in the library:
useMountEffect
Description
Runs the callback only on first mount. The return value of the callback is ignored.
Parameters
callback
(Function): The callback to run on first mount.
Returns
None
useUnmountEffect
Description
Runs the callback only on unmount. The return value of the callback is ignored.
Parameters
callback
(Function): The callback to run on unmount.
Returns
None
useDelayedEffect
Description
Runs the callback only after it has been triggered delay + 1
times (since the first is on mount and does not represent a state change). The return value of the callback is ignored.
Parameters
callback
(Function): The callback to run after the delay. The first parameter is the number of times the effect has been triggered since either initialization or last reset, and the second argument is a function that allows you to reset the counter.deps
(Array): An array of dependencies to listen to. This works exactly like theuseEffect
hook's dependencies.delay
(Number): The number of times the dependencies must change before the callback is run. Default is0
, meaning the callback is run on any change, but not on mount.
Returns
None
Meta
This is a React Library Created by Ptolemy2002's cra-template-react-library template in combination with create-react-app. It contains methods of building and publishing your library to npm. For now, the library makes use of React 18 and does not use TypeScript.
Peer Dependencies
These should be installed in order to use the library, as npm does not automatically add peer dependencies to your project.
- @types/react: ^18.3.3
- @types/react-dom: ^18.3.0
- react: ^18.3.1
- react-dom: ^18.3.1
Commands
The following commands exist in the project:
npm run uninstall
- Uninstalls all dependencies for the librarynpm run reinstall
- Uninstalls and then Reinstalls all dependencies for the librarynpm run example-uninstall
- Uninstalls all dependencies for the example appnpm run example-install
- Installs all dependencies for the example appnpm run example-reinstall
- Uninstalls and then Reinstalls all dependencies for the example appnpm run example-start
- Starts the example app after building the librarynpm run build
- Builds the librarynpm run release
- Publishes the library to npm without changing the versionnpm run release-patch
- Publishes the library to npm with a patch version bumpnpm run release-minor
- Publishes the library to npm with a minor version bumpnpm run release-major
- Publishes the library to npm with a major version bump