Package Exports

@better-typed/react-lifecycle-hooks
@better-typed/react-lifecycle-hooks/dist/index.cjs.js
@better-typed/react-lifecycle-hooks/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@better-typed/react-lifecycle-hooks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@better-typed/react-lifecycle-hooks

npm bundle size npm type definitions NPM npm

React lifecycle turned into dev friendly hooks

Better Typed

Features

🚀 Simple, fast and light
🏭 No external dependencies

Install

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

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

Usage

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 (
    // ...
  )
}