useEffect Cheat Sheet

Recently I started working with functional components instead of class-based ones. Just to learn how hooks works and this way we can write less code and make it more reusable.

The benefit of using hooks and functional components is as simple as using them. Reusability, simpler & shorter code and the simplicity of testing those components

TBH this is not a tutorial of react hooks p.s. the docs are really good for this. This serves as a quick reference for people already somewhat familiar with writing hooks. If you are new to hooks, you can still take a look. With that said, let’s begin.

ComponentDidMount

componentDidMount() is a hook that gets invoked right after a React component has been mounted aka after the first render() lifecycle

The above snippet shows an example of componentDidMount in class and functional component.

ComponentWillUnmount

componentWillUnmount() is a hook that gets invoked right after a React component has been unmounted.

The above snippet shows an example of componentWillUnmount in class and a functional component.

ComponentWillReceiveProps

componentWillReceiveProps() is a hook that gets invoked right after a child component receives props from its parent component.

The above snippet shows an example of componentWillReceiveProps in a class and a functional component.

So this was a quick react useEffect cheat Sheet.

Looking forward for your reviews and feedbacks in response section.