https://github.com/joakimunge/react-use-lifecycle
Hooks implementation of common react class component lifecycle methods
https://github.com/joakimunge/react-use-lifecycle
fire hooks lifecycle lifecycle-hooks lifecycle-methods react
Last synced: 5 months ago
JSON representation
Hooks implementation of common react class component lifecycle methods
- Host: GitHub
- URL: https://github.com/joakimunge/react-use-lifecycle
- Owner: joakimunge
- License: mit
- Created: 2020-10-14T13:04:35.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2020-10-14T13:18:14.000Z (almost 5 years ago)
- Last Synced: 2025-02-17T17:53:10.883Z (8 months ago)
- Topics: fire, hooks, lifecycle, lifecycle-hooks, lifecycle-methods, react
- Language: JavaScript
- Homepage:
- Size: 2.93 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Lifecycle Hooks
> Hooks implementation of common react lifecycle methods.
## Install
```
$ npm install react-lifecycle-hooks
```
## Usage
```js
import {
useComponentDidMount,
useComponentDidUpdate,
useComponentWillUnmount,
} from 'react-lifecycle-hooks';
const SomeComponent = () => {
useComponentDidMount(() => {
// Your effect that will fire once
});
useComponentDidUpdate(() => {
// Your effect
});
useComponentWillUnmount(() => {
// Your effect
});
};
```
Just like with a regular `useEffect` you can pass guards/dependencies to `useComponentDidUpdate` to make it fire only when those dependencies has been updated.
```js
const SomeComponent = () => {
useComponentDidUpdate(() => {
// Your effect that only fires when someProp is updated
}, [someProp]);
};
```
## Reasoning
I like readable code. I like react. What I don't like is the somewhat convoluted code that comes with implementing lifecycle methods with `useEffect`. For example, returning a function in the end of an effect never screamed "This will be fired before the component unmounts" to me.