⚛️ 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
• 🛑 Should you migrate class components to hooks?

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

Before you use

As the react documentation says, class components aren't going away, so you probably won't have to migrate your project to functional components in most cases.

But if you run into a situation like me where you need the powerful hooks from react-navigation, react-spring or any other similar library, lifecycle-hooks will make your migration a lot easier.

Licenses

MIT © DaniAkash