Learn React Hooks for Frontend Development/

...

/

Performing a Task at the Mount

Performing a Task at the Mount

Learn how to listen for the mount moment to trigger specific actions, such as fetching data only during the initial component mount.

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 ...