DEV Community 👩‍💻👨‍💻

Cover image for The React Lifecycle Methods: An Introduction
Adriana DiPietro
Adriana DiPietro

Posted on

The React Lifecycle Methods: An Introduction

Welcome to an introduction to React Lifecycle Methods! This guide aims to help us learn a few things:

  1. What is the React Lifecycle?
  2. Why do we use React Lifecycle Methods?
  3. What are some React Lifecycle Methods?
  4. Vocabulary: "mounting", "unmounting", "JSX"

Now that we know what we will learn, let's get started.

What is the React Lifecycle?

You can think of the React Lifecycle as the life of a component. Each component experiences a lifecycle through mounting, updating, and unmounting. Colloquially, the birth, the growth, and the death of a component.

What is "mounting"?

Mounting establishes components into actual DOM elements that will be displayed in the DOM, and thus, to the client-side.

What is "unmounting"?

Unmounting, as we can imagine, is the process of removing DOM elements from the DOM.

Why do we use React Lifecycle Methods?

In a previous post, I explained what React is and what React Components are. To summarize, React uses a component-architecture to make building user interfaces more efficient. As components allow an application to implement a separation of concerns, or the single responsibility principle, there are a lot of moving parts(ahem, components) to a React-built application.

Therefore, components need to only "live" on the client-side when necessary. Hence, a lifecycle!

We only want users to see a component's rendered output when it makes sense because we want our application experience to be succinct and easy.

For example, a component called "SignupForm" may only be mounted when the signup link is clicked and may be unmounted as the user is redirected to the application home page after successful a signup.

Some Lifecycle Methods:

render()

  • is the most used lifecycle method, as it is required in every React class component.
  • is a pure function; render() has no side effects => it will always returns same output given the same input.
  • is in charge of rendering your component to the UI.
  • returns JSX.
  • cannot modify component state as its principal purpose is to render the component to the client.

constructor()

  • is called before a component is mounted.
  • is used for initializing local state.
  • assigns an object to "this.state" through super(props).
  • is no longer necessary for class components through ES6.
  • can be replaced with creating an object using "this.state".

componentDidMount()

  • gets invoked after a React component has been mounted.
  • supplies a place for API calls and fetching remote data.
  • allows you to use setState() to update state.

componentWillUnmount()

  • gets invoked just before the component unmounts.
  • represents the end of a component's lifecycle.
  • implements "clean up", such as clearing a timer, clearing a cached store.

Vocabulary

  • JSX: stands for JavaScript XML; it is syntactic extension of JavaScript that allows us to write HTML in React.
  • Mounting: placing a component into the DOM.
  • Unmounting: removing a component from the DOM.
  • setState(): when called, tells React that the state has changed.
  • Single responsibility: assigning individual responsibility to individual pieces, such as components.
  • pure function: a function that returns the same output given the same input; has no side effects.

🪐 Thank you for reading along.
🪐 Comment below to continue the discussion!

Top comments (4)

Collapse
lukeshiru profile image
Luke Shiru

Might be worth mentioning that nowadays folks don't use lifecycle methods, and instead use hooks to achieve the same things in a more composable/reusable kind of way. So you go from this:

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = { count: props.initialCount };
    }
    componentDidMount() {
        this.desubscribe = subscribeToSomething();
    }
    componentWillUnmount() {
        this.desubscribe();
    }
    render() {
        const { count } = this.state;
        const { initialCount, ...props } = this.props;

        return (
            <button
                onClick={() => this.setState({ count: count + 1 })}
                {...props}
            >
                {count}
            </button>
        );
    }
}
Enter fullscreen mode Exit fullscreen mode

To something like this:

const Example = ({ initialCount, ...props }) => {
    const [count, setCount] = useState(initialCount);

    useEffect(subscribeToSomething);

    return (
        <button onClick={() => setCount(count + 1)} {...props}>
            {count}
        </button>
    );
}
Enter fullscreen mode Exit fullscreen mode

Functional components are way simpler than the class based ones, and don't require to know this methods, because this behaviors are based on hooks.

Cheers!

Collapse
am20dipi profile image
Adriana DiPietro Author

Totally agree. I plan on diving into Hooks on my next post. Thanks for commenting!!

Collapse
grahamthedev profile image
GrahamTheDev • Edited on

Just popped by to say I love the single colour cover images you keep using...they keep making me think that something has gone wrong so I spend longer looking at your article in the feed...very clever!

Nice article too by the way, but that was my secondary thought 🤣

❤🦄

Collapse
am20dipi profile image
Adriana DiPietro Author

Omg haha! Thanks so much for the comment

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.