react-use-lifecycle-helpers

1.0.1 • Public • Published

react-use-lifecycle-helpers

Helpers functions arround useEffect hook to make your life easier, providing the most use cases of useEffect hook, among them the lifecycle of class component.

NPM JavaScript Style Guide

Install

npm install --save react-use-lifecycle-helpers

See Example

Usage

useDidMount

This hook is a replacement for the componentDidMount method.

import useLifecycleMethods from "react-use-lifecycle-helpers";
 
export default function MyComponent() {
  const { useDidMount } = useLifecycleMethods();
 
  useDidMount(() => {
    console.log("MyComponent is mounted");
  });
}

useDidUpdate

This hook is similar to the componentDidUpdate method.

import useLifecycleMethods from "react-use-lifecycle-helpers";
 
export default function MyComponent(props) {
  const [state, setState] = useState({ count: 0, bool: false });
 
  const { useDidUpdate } = useLifecycleMethods(state, props);
 
  useDidUpdate(() => {
    console.log("MyComponent is updated");
  });
}

useWillUnmount

A hook that's a replacement for the componentWillUnmount method.

import useLifecycleMethods from "react-use-lifecycle-helpers";
 
export default function MyComponent() {
  const { useWillUnmount } = useLifecycleMethods();
 
  useWillUnmount(() => {
    console.log("MyComponent will unmount");
  });
}

useDepsDidChange

Track multiple or one of the state properties.

import useLifecycleMethods from "react-use-lifecycle-helpers";
 
export default function MyComponent(props) {
  const [state, setState] = useState({ count: 0, bool: false });
 
  const { useDepsDidChange } = useLifecycleMethods(state, props);
 
  useDepsDidChange(
    prevState => {
      console.log("useDepsDidChange Count", state.count, prevState.count);
    },
    ["count"]
  );
 
  useDepsDidChange(
    prevState => {
      console.log("useDepsDidChange Bool", state.bool, prevState.bool);
    },
    ["bool"]
  );
 
  useDepsDidChange(
    prevState => {
      console.log("useDepsDidChange Count", state.count, prevState.count);
      console.log("useDepsDidChange Bool", state.bool, prevState.bool);
    },
    ["bool", "count"]
  );
}

License

MIT © Mohcine NAZRHAN

Contributors

Todo

  • Migrate to TypeScript

Package Sidebar

Install

npm i react-use-lifecycle-helpers

Weekly Downloads

2

Version

1.0.1

License

MIT

Unpacked Size

27.1 kB

Total Files

7

Last publish

Collaborators

  • nazrhanmohcine