3imed-jaberi / use-lifecycle-hooks

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

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).
• useComponentWillUnmount — same with componentWillUnmount.

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

Args

Argument	Type	Descriptio	Note
funcs	Function	callback function only allowed to return void.	******
deps	Array	all props/states values that change them lead to re-rendering.	only in useShuseShouldComponentUpdate.

Undecomented Hooks/HOC

• [useShouldComponentUpdate][use-should-component-update-docs-url] — same with shouldComponentUpdate (and componentDidUpdate with comparison).
• usePureComponent — same as useShouldComponentUpdate.
• withShouldComponentUpdate — same as useShouldComponentUpdate but follow the hoc pattern.

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