README
use-lifecycle-hooks
Use a class-based lifecycle ⚡ under the React Hooks ⚛️🚀 ..
Thinking in lifecycles terms in hooks is a bad practice.
You can follow this article for a useEffect guide and how it's bad to mix think.
Prerequisites ⚠️:
In order to use this library, a React version >=16.8.0 is required which introduce React Hooks ⚛️⚡ ..
Installation
# npm ..
$ npm install use-lifecycle-hooks
# yarn ..
$ yarn add use-lifecycle-hooks
API
useComponentWillMount— same with componentWillMount.useComponentDidMount— same with componentDidMount.useComponentDidUpdate— same with componentDidUpdate (pure componentDidUpdate).useShouldComponentUpdate— same with shouldComponentUpdate (and componentDidUpdate with comparison).useComponentWillUnmount— same with componentWillUnmount.
Every lifecycle hook can be used more than one time in the same function, observing the hook rules📏.
Args
| Argument | Type | Descriptio | Note |
|---|---|---|---|
funcs |
Function | callback function only allowed to return void. | ********** |
deps |
Array | all props/states values that change them lead to re-rendering. | only in useShuseShouldComponentUpdate. |
Usage
This is a practical example of how to use. For more, you can review the docs dir.
import React from 'react';
import { useComponentDidMount } from 'use-lifecycle-hooks';
function yourComponent () { // <yourComponent />
// State ..
const [state, setState] = React.useState(' Hello World !');
// ComponentDidMount ..
useComponentDidMount(() => {
setState(ComponentDidMountMsg);
});
return <h1>{state}</h1>;
}
You can play around with it on this sandbox codesandbox.io/use-lifecycle-hooks .. or clone the repo and play around with the all examples in the examples folder 👻.