⚛️ React lifecycle hooks 🍥🎣

React class component lifecycle methods re-implemented as hooks

Easiest way to migrate class components to hooks ✌️

PRs Welcome 👍✨

• 📦 Installation
• ℹ️ Usage
• 💡 Examples

Motivation

While converting class components to hooks, I found it quite annoying to write new useEffect & useRef logic to implement the same lifecycle methods I already had. So thought I could just re-implement the lifecycle methods & states as hooks to simplify the process and it turned out to be a quick drop-in replacement for the class components 😎✨

With class components

import React, { Component } from "react";

class LegacyComponent extends Component {
  constructor() {
    super();
    this.state = {
      text: "",
    };
    document.title = "Legacy Component";
  }

  componentDidMount() {
    this.setState({
      text: "component mounted!",
    });
  }

  render() {
    return (
      <div>
        <h3>{this.state.text}</h3>
      </div>
    );
  }
}

With lifecycle-hooks

import React from "react";
import {
  useState,
  useConstructor,
  useDidMount,
} from "@daniakash/lifecycle-hooks";

const NewComponent = () => {
  const [state, setState] = useState({
    text: "",
  });

  useConstructor(() => {
    document.title = "Legacy Component";
  });

  useDidMount(() => {
    setState({
      text: "component mounted!",
    });
  });

  return (
    <div>
      <h3>{this.state.text}</h3>
    </div>
  );
};

Installation

yarn add @daniakash/lifecycle-hooks

# or

npm i @daniakash/lifecycle-hooks

Usage

import {
  useState,
  useConstructor,
  useDidMount,
  useDidUpdate,
  useWillUnmount,
} from "@daniakash/lifecycle-hooks";

useState

useState behaves in the same way as this.state in class components. However it is different from React's usual useState hook cuz here it only accepts objects.

traditional class state

// Initialization
this.state = {
  name: "",
  email: "",
};

// updating name
this.setState({
  name: "John Doe",
});

lifecycle-hook's useState

// Initialization
const [state, setState] = useState({
  name: "",
  email: "",
});

// updating name
setState({
  name: "John Doe",
});

All the other hooks

As their name suggests, the following hooks are straight forward to use and they will execute the callback function at the respective component lifecycle.

• useConstructor
• useDidMount
• useDidUpdate
• useWillUnmount

Refer the example for the playground where you can experiment with these lifecycle methods

Examples

• Lifecycle hooks codesandbox playground

Licenses

MIT © DaniAkash