use-lifecycle-hooks

Use a class-based lifecycle ⚡ under the React Hooks ⚛️🚀 ..

Thinking in lifecycles terms in hooks is a bad practice.
You can follow this article for a useEffect guide and how it's bad to mix think.

Prerequisites ⚠️:

In order to use this library, a React version >=16.8.0 is required which introduce React Hooks ⚛️⚡ ..

Installation

# npm .. 
$ npm install use-lifecycle-hooks
# yarn .. 
$ yarn add use-lifecycle-hooks

API

• useComponentWillMount — same with componentWillMount.
• useComponentDidMount — same with componentDidMount.
• useComponentDidUpdate — same with componentDidUpdate (pure componentDidUpdate).
• useShouldComponentUpdate — same with shouldComponentUpdate (and componentDidUpdate with comparison).
• useComponentWillUnmount — same with componentWillUnmount.

Every lifecycle hook can be used more than one time in the same function, observing the hook rules📏.

Args

Usage

This is a practical example of how to use. For more, you can review the docs dir.

import React from 'react';
import { useComponentDidMount } from 'use-lifecycle-hooks';
 
 
function yourComponent () { // <yourComponent /> 
  // State .. 
  const [state, setState] = React.useState(' Hello World !');
 
  // ComponentDidMount .. 
  useComponentDidMount(() => {
    setState(ComponentDidMountMsg);
  });
 
  return <h1>{state}</h1>;
}

You can play around with it on this sandbox codesandbox.io/use-lifecycle-hooks .. or clone the repo and play around with the all examples in the examples folder 👻.

License

MIT