bettertyped/react-lifecycle-hooks

🧩 React Lifecycle Hooks - allows to useDidMount, useDidUpdate, useWillUnmount, useDidRendered lifecycle hooks with no external dependencies

🧩 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

npm install --save @better-hooks/lifecycle

or

yarn add @better-hooks/lifecycle

---

Examples

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

react-lifecycle-hooks's Issues

Example shows invalid types

Following the example for useDidChange from the README doesn't seem to work. It looks like there might be a type mismatch. 🤔

The null we can easily fix with prevProps?.[0].value !== props.value, it's the callback not matching that I'm stuck on.

export const Example: React.FC<{ value: number }> = (props) => {
  // Called when dependencies change, we can inspect previous dependencies
  useDidChange(
    // Argument of type '(prevProps: PropsWithChildren<{ value: number; }>[] | null) => void' is not assignable to parameter of type 'VoidFunction | ((previousDependencies: PropsWithChildren<{ value: number; }>[] | null) => VoidFunction)'.
    // Type '(prevProps: PropsWithChildren<{ value: number; }>[] | null) => void' is not assignable to type 'VoidFunction'.
    // Target signature provides too few arguments. Expected 1 or more, but got 0.
    // @ts-expect-error
    (prevProps) => {
      // 'prevProps' is possibly 'null'
      // @ts-expect-error
      if (prevProps[0].value !== props.value) {
        // ...
      }
    },
    [props],
    true
  );

  return <div>Test..</div>;
};