Search⌘ K
Home
Courses
Learn React Hooks for Frontend Development

Performing a Task at the Mount

Explore how to handle tasks during the mounting phase of React function components. Understand initializing state, fetching data asynchronously from an API, and updating the UI using custom state management functions for dynamic content rendering.

We'll cover the following...

Mount and un-mount dynamic component

Components mountMounting occurs when a component is first added to the virtual DOM and subsequently to the actual DOM. It involves the initialization of the component, setting up initial state, and rendering it to the screen. and un-mountUnmounting occurs when a component is removed from the virtual DOM and, consequently, from the actual DOM. It involves cleaning up resources, event listeners, or subscriptions associated with the component. as things show up and disappear based on the business requirement. At the mount, it's common to want to perform a task such as initializing some variables, calculating some formulas, or fetching an API to get some resources over the internet. Let's use an API call as an example.

Let's say a count value needs to be fetched from an online service called /giveMeANumber. When this fetch returns successfully, we would like to reflect the change to the screen:

fetch('/giveMeANumber').then(res => {
  // Once the data is successfully retrieved, render the 'Title' component
  ReactDOM.render(<Title />, rootEl);
})
Fetching data from the endpoint

The code above represents what we'd like ...