Welcome to an introduction to React Lifecycle Methods! This guide aims to help us learn a few things:
- What is the React Lifecycle?
- Why do we use React Lifecycle Methods?
- What are some React Lifecycle Methods?
- 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 (3)
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 🤣
❤🦄
Omg haha! Thanks so much for the comment
Totally agree. I plan on diving into Hooks on my next post. Thanks for commenting!!