https://github.com/bettertyped/react-lifecycle-hooks
🧩 React Lifecycle Hooks - allows to useDidMount, useDidUpdate, useWillUnmount, useDidRendered lifecycle hooks with no external dependencies
https://github.com/bettertyped/react-lifecycle-hooks
did hook hooks lifecycle mount react react-hooks reactjs render typescript unmount update use usedidmount usedidrender usedidunmount usewillunmount
Last synced: 12 months ago
JSON representation
🧩 React Lifecycle Hooks - allows to useDidMount, useDidUpdate, useWillUnmount, useDidRendered lifecycle hooks with no external dependencies
- Host: GitHub
- URL: https://github.com/bettertyped/react-lifecycle-hooks
- Owner: BetterTyped
- License: mit
- Created: 2021-10-17T15:42:07.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-18T17:35:25.000Z (over 1 year ago)
- Last Synced: 2025-04-29T15:39:28.349Z (12 months ago)
- Topics: did, hook, hooks, lifecycle, mount, react, react-hooks, reactjs, render, typescript, unmount, update, use, usedidmount, usedidrender, usedidunmount, usewillunmount
- Language: TypeScript
- Homepage:
- Size: 1.06 MB
- Stars: 24
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: Contributing.md
- License: LICENSE
- Code of conduct: Code_of_Conduct.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# 🧩 React Lifecycle Hooks
## About
React lifecycle turned into dev friendly and readable hooks
## Key Features
🔮 **Simple usage**
🚀 **Fast and light**
💎 **No external dependencies**
🪄 **Increases code readability**
🎊 **SSR Support**
## Installation
```bash
npm install --save @better-hooks/lifecycle
```
or
```bash
yarn add @better-hooks/lifecycle
```
---
## Examples
```tsx
import React from "react";
import {
useDidMount,
useDidUpdate,
useWillUnmount,
useIsMounted,
useWillMount,
useForceUpdate,
useDidChange
} from "@better-hooks/lifecycle";
const MyComponent: React.FC = (props) => {
const [isOpen, setIsOpen] = React.useState(false)
// returns ref with the mounted boolean state
const mounted = useIsMounted()
// Method for the component rerendering
const forceUpdate = useForceUpdate()
// Called before mount
useWillMount(() => {
// ...
})
// Called on component mount
useDidMount(() => {
// ...
})
// Called when isOpen change
useDidUpdate(() => {
// ...
}, [isOpen])
// Called when isOpen change but also on mount
useDidUpdate(() => {
// ...
}, [isOpen], true)
// Called when dependencies change, we can inspect previous dependencies
useDidChange((prevProps) => {
if(prevProps[0].value !== props.value) {
// ...
}
}, [props], true)
// Called last
useWillUnmount(() => {
// ...
})
return (
// ...
)
}
```