React Component LifeCycle Methods

React LifeCycle Method

React LifeCycle refers to the different phases a component goes through during its time in a React application.

These phases allow us to run specific code at key moments in a component’s life, such as when it’s created, updated, or removed from the screen.

There are three phases of the React component LifeCycle

Mounting Phase (Component is Added to the DOM)

This is when the component is added to the page. It’s a good time to fetch data or set up event listeners. Methods like componentDidMount() (in class components) or useEffect() (in functional components) are triggered during this phase.

Initialization Phase

Before the component mounts, React prepares the component’s initial state and other properties.

Class Components: This is handled by the constructor() method, where we can initialize state and bind methods. Functional Components: Here, the state is initialized using useState() or other hooks, setting up the necessary state for the component’s behavior.

Updating (Component is Re-rendered)

This happens whenever the component’s state or props change, causing it to update and re-render.

Methods like componentDidUpdate() (class components) or useEffect() with dependencies (functional components) are called when the component’s data or behavior changes.

Unmounting (Component is Removed from the DOM)

When a component is no longer needed, it gets removed from the page. This is when we should clean up resources like network requests, timers, or event listeners.

In class components, componentWillUnmount() is used. In functional components, the cleanup function inside useEffect() handles this.

How do we prevent unnecessary re-renders in React?

Use shouldComponentUpdate(), React.memo(), or useMemo().

What happens if I forget to clean up inside componentWillUnmount()?

It can cause memory leaks (e.g., event listeners not being removed).

Why should setState not be used in render()?

Calling setState in render() creates an infinite loop since each update triggers another re-render.

What is the difference between componentDidMount() and useEffect()?

componentDidMount() is a class-based lifecycle method.

useEffect(()
=> {

}, [])

// in functional components is equivalent to componentDidMount().

Lesson overview (React LifeCycle Method)

render()

The render method is the most commonly used lifecycle method in React class components, and you might remember it from the previous lesson on class components.

It's the only lifecycle method that's absolutely necessary for a class component to function.

This method executes both when the component mounts and whenever it updates.

The render function must remain pure — meaning it should not alter the component’s state, should consistently return the same output for the same inputs, and must not directly manipulate the browser or DOM.

componentDidMount()

This method executes right after the component has been mounted to the DOM.

It's the ideal place to initiate data fetching or perform any operations that depend on the component being present in the DOM.

Whether you're calling an API or setting up subscriptions, this is where such actions should be handled to ensure the component is fully ready for interaction.

componentDidUpdate()

This method is triggered after a component updates and re-renders. Since it runs after every update, it's important to use caution when modifying state here.

Updating state without proper checks can lead to an infinite re-render loop. To prevent this, it's best to compare previous and current props or state using conditional logic before making any changes.

This method is ideal for responding to changes in the DOM or reacting to updates in state or props. For instance, if a user's data changes, you might use this method to refetch that updated data or perform other actions based on the new values.

componentWillUnmount()

This is the final lifecycle method, called just before a component is unmounted and removed from the DOM.

It is used for cleanup tasks, such as canceling any ongoing network requests, clearing timers, or removing subscriptions to prevent memory leaks and unnecessary operations after the component is no longer needed.

How useEffect() combines the lifecycle methods

Now that we've explored class lifecycle methods, it's important to recognize that the useEffect hook in functional components combines the functionality of componentDidMount, componentDidUpdate, and componentWillUnmount.

The specific behavior of useEffect depends on its dependency array and whether it returns anything.

An empty dependency array behaves like componentDidMount, running only once when the component mounts.

A dependency array with specific values acts like a combination of componentDidMount and componentDidUpdate, triggering the effect only when the specified dependencies change.

If no dependency array is provided, useEffect runs after every render, combining the behavior of both componentDidMount and componentDidUpdate.

Lastly, if a return function is used within useEffect(), it serves as a cleanup, similar to componentWillUnmount, which is executed before the component is unmounted.

  useEffect(() => {
    placeholderFunction();
    return () => cleanupFunction();
  }, [])