JSPM

@better-typed/react-lifecycle-hooks

0.1.4
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1860
  • Score
    100M100P100Q123113F
  • License MIT

React lifecycle turned into dev friendly hooks

Package Exports

  • @better-typed/react-lifecycle-hooks

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 npm bundle size JavaScript Style Guide NPM npm GitHub stars

React lifecycle turned into dev friendly hooks

Features

  • 🚀 Simple, fast and light
  • 🏭 No external dependencies

Install

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

or

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

Usage

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

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

  // Called first
  useDidMount(() => {
    // ...
  })

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

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

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

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


  return (
    // ...
  )
}