use-lifecycle-hooks

Top Language Code Size

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 👻.