React Lifecycle Methods in Functional Terms

Before we get into lifecycle methods with react hooks, let's have a look at what they are and how they work. We'll start with a quick overview of:

1. What is the component lifecycle?
2. What are lifecycle methods?

What is the component lifecycle?

Just like the human lifecycle, react components go through a lifecycle of events:

1. Mounting: The component is created and inserted into the Document Object Model (DOM).
2. Updating: When the component is re-rendered as a result of changes made in either state or props
3. Unmounting: The component is removed from DOM
4. Error handling: If an error occurs during the rendering process, it must be handled.

What are lifecycle methods?

(class-based component)

The methods are called at various points throughout a component's lifecycle. All four phases of a component's lifecycle — mounting, updating, unmounting, and error handling — are covered by lifecycle methods.

1.componentDidMount: After the initial render, the component is mounted to the DOM and the componentDidMount method is invoked.

class DemoComponent extends React.Component {
  componentDidMount() {
    console.log("The DemoComponent is added into the DOM");
  }

2.componentDidUpdate: The componentDidUpdate lifecycle method is invoked after the changes in props or state are made

class DemoComponent extends React.Component {
  componentDidUpdate() {
    console.log("The DemoComponent is updated and rendered");
  }

3.componentWillUnmount: When a component is unmounted and destroyed, the componentWillUnmount lifecycle function is called. This is an excellent location for any necessary cleaning.

class DemoComponent extends React.Component {
  componentWillUnmount() {
    console.log("The DemoComponent has been removed from DOM");
  }

Pictorial Representation of class based lifecycle method

React lifecycle methods using React Hook - useEffect()

Key point of useEffect hook

1. It instructs React to carry out a job once the component has rendered.
2. useEffect is asynchronous, so it does not block the browser.
3. The useEffect hook allows components to have access to the lifecycle events of a component.
4. React first updates the DOM, then calls any function passed to useEffect()

Example: fetch request, DOM manipulation using setTimeOut()

syntax:

useEffect(callbackFunction, OptionalDependencies) 

// another way 

useEffect(() => {
    //callback function
},[dependency array])

Lifecycle handling with useEffect

(functional components)

The handling of lifecycle methods has been incredibly simple and easy since the introduction of react hooks. All of the methods stated above can be handled with the useEffect hook.

1.componentDidMount: 'useEffect with empty dependency array' replaces this method. If no value is provided in the array, it will only evaluate the hook on mount(first render).

const DemoComponent = () => {
  useEffect(() => {
    console.log("The DemoComponent is added into the DOM");
    //This will only run once on initial render as there is empty dependency array
  },[]);

2.componentDidUpdate: This method is replaced by useEffect with no dependency array or values in dependency array. If the array itself is not provided, the hook will be evaluated on every re-render. If any value is provided in the dependency array then the hook will be evaluated in the change of that variable

const Component = () => {
  useEffect(() => {
    console.log("The DemoComponent is updated");
    //called on every re-render
  });

useEffect(() => {
    console.log("The counter variable is updated");
    //called when counter value changes
  },[counter]);

3.componentWillUnmount: UseEffect with a return statement has replaced this technique. If useEffect returns a function, that function is only called after the component is removed from the DOM.

useEffect(() => {
    return () => {
            console.log("The Demo component is removed from DOM");
            //called when component is removed 
        }
  }, []);

Pictorial Representation useEffect hook