@better-typed/react-lifecycle-hooks

!npm bundle size
!npm type definitions
!NPM
!npm
!GitHub stars

> React lifecycle turned into dev friendly hooks

- Better Typed

Features

- :rocket: Simple, fast and light
- :factory: No external dependencies

Install

``bash
npm install --save @better-typed/react-lifecycle-hooks
`

or

`bash
yarn add @better-typed/react-lifecycle-hooks
`

Usage

`tsx
import React from "react";
import { useDidMount, useDidRender, useDidUpdate, useWillUnmount,useIsMounted, useWillMount } from "@better-typed/react-lifecycle-hooks";

const MyComponent: React.FC = () => {
const [isOpen, setIsOpen] = React.useState(false)

// returns ref with the mounted boolean state
const mounted = useIsMounted()

// Called before mount
useWillMount(() => {
// ...
})

// Called on component mount
useDidMount(() => {
// ...
})

// Called second, when initial DOM changes are triggered
useDidRender(() => {
// ...
})

// Called when isOpen change
useDidUpdate(() => {
// ...
}, [isOpen])

// Called when isOpen change but also on mount
useDidUpdate(() => {
// ...
}, [isOpen], true)

// Called last
useWillUnmount(() => {
// ...
})


return (
// ...
)
}

``