Helpers functions arround useEffect hook to make your life easier, providing the most use cases of useEffect hook, among them the lifecycle of class component.
npm install --save react-use-lifecycle-helpersThis hook is a replacement for the componentDidMount method.
import useLifecycleMethods from "react-use-lifecycle-helpers"; export default function MyComponent() { const { useDidMount } = useLifecycleMethods(); useDidMount(() => { console.log("MyComponent is mounted"); }); }This hook is similar to the componentDidUpdate method.
import useLifecycleMethods from "react-use-lifecycle-helpers"; export default function MyComponent(props) { const [state, setState] = useState({ count: 0, bool: false }); const { useDidUpdate } = useLifecycleMethods(state, props); useDidUpdate(() => { console.log("MyComponent is updated"); }); }A hook that's a replacement for the componentWillUnmount method.
import useLifecycleMethods from "react-use-lifecycle-helpers"; export default function MyComponent() { const { useWillUnmount } = useLifecycleMethods(); useWillUnmount(() => { console.log("MyComponent will unmount"); }); }Track multiple or one of the state properties.
import useLifecycleMethods from "react-use-lifecycle-helpers"; export default function MyComponent(props) { const [state, setState] = useState({ count: 0, bool: false }); const { useDepsDidChange } = useLifecycleMethods(state, props); useDepsDidChange( prevState => { console.log("useDepsDidChange Count", state.count, prevState.count); }, ["count"] ); useDepsDidChange( prevState => { console.log("useDepsDidChange Bool", state.bool, prevState.bool); }, ["bool"] ); useDepsDidChange( prevState => { console.log("useDepsDidChange Count", state.count, prevState.count); console.log("useDepsDidChange Bool", state.bool, prevState.bool); }, ["bool", "count"] ); }MIT © [Mohcine NAZRHAN](https://github.com/Mohcine NAZRHAN)
- Migrate to TypeScript