https://github.com/erkobridee/react-lifecycle-hooks
useful react hooks to manage any function component lifecycle
https://github.com/erkobridee/react-lifecycle-hooks
lifecycle npm-package package react react-hooks rollup typescript
Last synced: 12 months ago
JSON representation
useful react hooks to manage any function component lifecycle
- Host: GitHub
- URL: https://github.com/erkobridee/react-lifecycle-hooks
- Owner: erkobridee
- License: isc
- Created: 2021-03-22T15:20:16.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-12-15T11:47:44.000Z (over 2 years ago)
- Last Synced: 2024-11-01T18:38:59.169Z (over 1 year ago)
- Topics: lifecycle, npm-package, package, react, react-hooks, rollup, typescript
- Language: TypeScript
- Homepage: https://erkobridee.github.io/react-lifecycle-hooks
- Size: 1.6 MB
- Stars: 12
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/erkobridee/react-lifecycle-hooks/actions/workflows/publish.yml) [](https://codecov.io/gh/erkobridee/react-lifecycle-hooks) [](https://github.com/erkobridee/react-lifecycle-hooks/blob/main/LICENSE) [](https://github.com/erkobridee/react-lifecycle-hooks) [](https://erkobridee.github.io/react-lifecycle-hooks)
# react lifecycle hooks
According to [A Complete Guide to useEffect | Overreacted](https://overreacted.io/a-complete-guide-to-useeffect/)
> Keep in mind that the mental model for effects is different from componentDidMount and other lifecycles, and trying to find their exact equivalents may confuse you more than help
So, to keep peace of mind and manage any function component lifecycle, follow the equivalents hooks to the cases: `useConstructor`, `useDidMount`, `useDidUpdate` and `useWillUnmount`, plus `useForceRender`
👋  **IMPORTANT:** this library requires a peer dependency of the react.js [v16.8.0](https://github.com/facebook/react/releases/tag/v16.8.0) or newer
## Install
```
npm install --save @erkobridee/react-lifecycle-hooks
```
if you are using on a TypeScript, you'll need to install
```
npm install --save-dev @erkobridee/ts-definitions-common
```
## API
### useConstructor
```javascript
import { useConstructor } from '@erkobridee/react-lifecycle-hooks';
export const Component = () => {
useConstructor(() => console.log(`executes before mount the component`));
return
Component;
};
export default Component;
```
### useDidMount
```javascript
import { useDidMount } from '@erkobridee/react-lifecycle-hooks';
export const Component = () => {
useDidMount(() => console.log(`executes after component mounted`));
return
Component;
};
export default Component;
```
### useDidUpdate
```javascript
import React from 'react';
import { useDidUpdate } from '@erkobridee/react-lifecycle-hooks';
export const Component = () => {
const [count, setCount] = React.useState(0);
useDidUpdate(() => console.log(`executes whenever the component updates`));
useDidUpdate(() => console.log(`count value updated to ${count}`), [count]);
const resetClickHandler = () => setCount(0);
const addClickHandler = () => setCount((prevValue) => prevValue + 1);
const subtractClickhandler = () => setCount((prevValue) => prevValue - 1);
return (
Component
count: {count}
reset
add
subtract
);
};
export default Component;
```
### useWillUnmount
```javascript
import React from 'react';
import { useWillUnmount } from '@erkobridee/react-lifecycle-hooks';
const InnerComponent = () => {
useWillUnmount(() => console.log(`executes before unmount the component`));
return
Inner Component;
};
const Component = () => {
const [show, setShow] = React.useState(true);
const removeClickHandler = () => setShow(false);
return (
Component
{show && (
remove
)}
);
};
export default Component;
```
### useForceRender
```javascript
import React from 'react';
import { useForceRender } from '@erkobridee/react-lifecycle-hooks';
export const Component = () => {
const forceRender = useForceRender();
const forceRenderClickHandler = () => forceRender();
React.useEffect(() => {
console.log(`component render`);
});
return (
Component
force render
);
};
export default Component;
```
## Useful references
- React.js Docs
- [State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html)
- [The Component Lifecycle](https://reactjs.org/docs/react-component.html#the-component-lifecycle)
- [Introducing Hooks](https://reactjs.org/docs/hooks-intro.html)
- [6 Reasons to Use React Hooks Instead of Classes | by Dilantha Prasanjith | Bits and Pieces](https://blog.bitsrc.io/6-reasons-to-use-react-hooks-instead-of-classes-7e3ee745fe04) - 2020/09/14
- [React Components vs. React Hooks | by Gerardo Fernández - Better Programming](https://betterprogramming.pub/react-components-vs-react-hooks-52932d4ab6db) - 2019/10/11
- [React Hooks: everything you need to know! 🚀 | Softwareontheroad](https://softwareontheroad.com/react-hooks/) - (2019/03/10) The new React Hooks API is here and it's gonna change the way you develop react apps 🔥
- [Under the hood of React’s hooks system | The Guild Blog](https://the-guild.dev/blog/react-hooks-system) - 2018/11/21
- [Under-the-hood of React Hooks | by Craig Taub - ITNEXT](https://itnext.io/under-the-hood-of-react-hooks-805dc68581c3) - 2020/04/15