Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!
React class components can have hooks for several lifecycle events.
Hooks allow function components to access them too, in a different way.
During the lifetime of a component, there’s a series of events that gets called, and to each event you can hook and provide custom functionality.
What hook is best for what functionality is something we’re going to see here.
First, there are 3 phases in a React component lifecycle:
- Mounting
- Updating
- Unmounting
Let’s see those 3 phases in detail and the methods that get called for each.
Mounting
When mounting you have 4 lifecycle methods before the component is mounted in the DOM: the constructor
, getDerivedStateFromProps
, render
and componentDidMount
.
Constructor
The constructor is the first method that is called when mounting a component.
You usually use the constructor to set up the initial state using this.state = ...
.
getDerivedStateFromProps()
When the state depends on props, getDerivedStateFromProps
can be used to update the state based on the props value.
It was added in React 16.3, aiming to replace the componentWillReceiveProps
deprecated method.
In this method you haven’t access to this
as it’s a static method.
It’s a pure method, so it should not cause side effects and should return the same output when called multiple times with the same input.
Returns an object with the updated elements of the state (or null if the state does not change)
render()
From the render() method you return the JSX that builds the component interface.
It’s a pure method, so it should not cause side effects and should return the same output when called multiple times with the same input.
componentDidMount()
This method is the one that you will use to perform API calls, or process operations on the DOM.
Updating
When updating you have 5 lifecycle methods before the component is mounted in the DOM: the getDerivedStateFromProps
, shouldComponentUpdate
, render
, getSnapshotBeforeUpdate
and componentDidUpdate
.
getDerivedStateFromProps()
See the above description for this method.
shouldComponentUpdate()
This method returns a boolean, true
or false
. You use this method to tell React if it should go on with the rerendering, and defaults to true
. You will return false
when rerendering is expensive and you want to have more control on when this happens.
render()
See the above description for this method.
getSnapshotBeforeUpdate()
In this method you have access to the props and state of the previous render, and of the current render.
Its use cases are very niche, and it’s probably the one that you will use less.
componentDidUpdate()
This method is called when the component has been updated in the DOM. Use this to run any 3rd party DOM API or call APIs that must be updated when the DOM changes.
It corresponds to the componentDidMount()
method from the mounting phase.
Unmounting
In this phase we only have one method, componentWillUnmount
.
componentWillUnmount()
The method is called when the component is removed from the DOM. Use this to do any sort of cleanup you need to perform.
Legacy
If you are working on an app that uses componentWillMount
, componentWillReceiveProps
or componentWillUpdate
, those were deprecated in React 16.3 and you should migrate to other lifecycle methods.
Download my free React Handbook
The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!
More react tutorials:
- A React simple app example: fetch GitHub users information via API
- Build a simple counter with React
- VS Code setup for React development
- How to pass props to a child component via React Router
- Create an app with Electron and React
- Tutorial: create a Spreadsheet using React
- The roadmap to learn React
- Learn how to use Redux
- Getting started with JSX
- Styled Components
- Introduction to Redux Saga
- Introduction to React Router
- Introduction to React
- React Components
- The Virtual DOM
- React Events
- The React State
- React Props
- The React Fragment
- The React Context API
- React PropTypes
- React concepts: declarative
- React: How to show a different component on click
- How to loop inside React JSX
- Props vs State in React
- Should you use jQuery or React?
- How much JavaScript you need to know to use React?
- Introduction to Gatsby
- How to reference a DOM element in React
- Unidirectional Data Flow in React
- React Higher Order Components
- React Lifecycle Events
- React Concept: Immutability
- React Concept: Purity
- Introduction to React Hooks
- Introduction to create-react-app
- React Concept: Composition
- React: Presentational vs Container Components
- Code Splitting in React
- Server Side Rendering with React
- How to install React
- CSS in React
- Using SASS in React
- Handling Forms in React
- React StrictMode
- React Portals
- React Render Props
- Testing React components
- How to pass a parameter to event handlers in React
- How to handle errors in React
- How to return multiple elements in JSX
- Conditional rendering in React
- React, how to transfer props to child components
- How to get the value of an input element in React
- How to use the useState React hook
- How to use the useCallback React hook
- How to use the useEffect React hook
- How to use the useMemo React hook
- How to use the useRef React hook
- How to use the useContext React hook
- How to use the useReducer React hook
- How to connect your React app to a backend on the same origin
- The Reach Router Tutorial
- How to use the React Developer Tools
- How to learn React
- How to debug a React application
- How to render HTML in React
- How to fix the `dangerouslySetInnerHTML` did not match error in React
- How I fixed an issue with a React login form state and Browser autofill
- How to configure HTTPS in a React app on localhost
- How to fix the "cannot update a component while rendering a different component" error in React
- Can I use React hooks inside a conditional?
- Using useState with an object: how to update
- How to move around blocks of code with React and Tailwind
- React, focus an item in React when added to the DOM
- React, edit text on doubleclick
- React Router, how to get data from a dynamic route
- React Router, why useLocation and useHistory might return undefined