• 📦 Installation
• ℹ️ Usage
• 💡 Examples
• 🛑 Should you migrate class components to hooks?

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 😎✨

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> ); } }

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> ); };

yarn add @daniakash/lifecycle-hooks # or npm i @daniakash/lifecycle-hooks

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

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.

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

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

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

• Lifecycle hooks codesandbox playground

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.

MIT © DaniAkash