@daniakash/lifecycle-hooks
v0.0.1-alpha-2
Published
React class component lifecycle methods re-implemented as hooks
Downloads
19
Readme
⚛️ 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
Licenses
MIT © DaniAkash