react-use-lifecycle-helpers's Introduction

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.

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"]
  );
}