@erkobridee/react-lifecycle-hooks

useful set of react hooks to manage any function component

Usage no npm install needed!

<script type="module">
  import erkobrideeReactLifecycleHooks from 'https://cdn.skypack.dev/@erkobridee/react-lifecycle-hooks';
</script>

README

Actions Status codecov GitHub license GitHub Repo stars Storybook

react lifecycle hooks

According to A Complete Guide to useEffect | Overreacted

Keep in mind that the mental model for effects is different from componentDidMount and other lifecycles, and trying to find their exact equivalents may confuse you more than help

So, to keep peace of mind and manage any function component lifecycle, follow the equivalents hooks to the cases: useConstructor, useDidMount, useDidUpdate and useWillUnmount, plus useForceRender

👋  IMPORTANT: this library requires a peer dependency of the react.js v16.8.0 or newer

Install

npm install --save @erkobridee/react-lifecycle-hooks

if you are using on a TypeScript, you'll need to install

npm install --save-dev @erkobridee/ts-definitions-common

API

useConstructor

import { useConstructor } from '@erkobridee/react-lifecycle-hooks';

export const Component = () => {
  useConstructor(() => console.log(`executes before mount the component`));

  return <div>Component</div>;
};

export default Component;

useDidMount

import { useDidMount } from '@erkobridee/react-lifecycle-hooks';

export const Component = () => {
  useDidMount(() => console.log(`executes after component mounted`));

  return <div>Component</div>;
};

export default Component;

useDidUpdate

import React from 'react';

import { useDidUpdate } from '@erkobridee/react-lifecycle-hooks';

export const Component = () => {
  const [count, setCount] = React.useState(0);

  useDidUpdate(() => console.log(`executes whenever the component updates`));

  useDidUpdate(() => console.log(`count value updated to ${count}`), [count]);

  const resetClickHandler = () => setCount(0);

  const addClickHandler = () => setCount((prevValue) => prevValue + 1);

  const subtractClickhandler = () => setCount((prevValue) => prevValue - 1);

  return (
    <div>
      <div>Component</div>
      <div>count: {count}</div>
      <div>
        <button onClick={resetClickHandler}>reset</button>
        <button onClick={addClickHandler}>add</button>
        <button onClick={subtractClickhandler}>subtract</button>
      </div>
    </div>
  );
};

export default Component;

useWillUnmount

import React from 'react';

import { useWillUnmount } from '@erkobridee/react-lifecycle-hooks';

const InnerComponent = () => {
  useWillUnmount(() => console.log(`executes before unmount the component`));

  return <div>Inner Component</div>;
};

const Component = () => {
  const [show, setShow] = React.useState(true);

  const removeClickHandler = () => setShow(false);

  return (
    <div>
      <div>Component</div>
      {show && (
        <div>
          <button onClick={removeClickHandler}>remove</button>
          <InnerComponent />
        </div>
      )}
    </div>
  );
};

export default Component;

useForceRender

import React from 'react';

import { useForceRender } from '@erkobridee/react-lifecycle-hooks';

export const Component = () => {
  const forceRender = useForceRender();

  const forceRenderClickHandler = () => forceRender();

  React.useEffect(() => {
    console.log(`component render`);
  });

  return (
    <div>
      <div>Component</div>
      <div>
        <button click={forceRenderClickHandler}>force render</button>
      </div>
    </div>
  );
};

export default Component;

Useful references