Component lifecycle

Each component goes through the same life cycle regardless of the type of component it is i.e. functional or class-based components. The only thing that differs between functional components and class-based components is the life cycle methods.

When a component first mounts the function componentDidMount (class-based function) or useEffect with an empty dependency array (functional component) is invoked.

• ComponentDidUpdate is invoked when either a state or a prop is updated. useEffect with that specific prop or state in the dependency array is invoked.
• componentWillUnmount is called just before unmounting. This functional component is handled by useEffect with an empty dependency array with a return function at the end of the useEffect.
• The return part of useEffect and componentWillUnmount should be used to clean up before applying new effects to the component.
• Read more about State here and Lifecycle here.