Introduction
React is the most popular JavaScript-based library for using component-based architecture to create applications that share user interface content.
React allows us to define the function or class-based component that provides a specific feature for an application; hence, each component in React application contains the set of lifecycle hooks.
There are several lifecycle methods, which we can override and run based on a particular timestamp, such as mounting the component, updating the state of a component, orunmounting the component.
In this guide, we will learn several approaches to execute JavaScript after the render() method, including using initial render to fetch the data, using componentDidUpdate(), and so on.
Component Lifecycle Hooks
Each lifecycle hook represents a specific state of an application. The primary stages of the lifecycle of a component are mounting, updating, unmounting, and error handling.
Mounting
This phase of the component lifecycle is used to call the method when the instance of the component can be created. It is also called while inserting the component into the HTML DOM.
There are a few methods used in the mounting phase:
constructor()
render()
componentDidMount()
static getDerivedStateFromProps()
Updating
This phase of the component lifecycle is triggered as soon as any changes are found in terms of state or props that allow the DOM to be re-rendered again and again to update the DOM elements.
The updating phase includes several lifecycle hooks:
render()
componentDidUpdate()
shouldComponentUpdate()
static getDerivedStateFromProps()
getSnapshotBeforeUpdate()
Unmounting
The unmounting phase begins when an existing component is removed from the DOM.
It includes a single and important lifecycle hook, componentWillUnmount().
Error Handling
One of the crucial phases of the component, error handling is used to trigger an action in case of an error during the component rendering.
Two methods are used to manage the errors in the existing component:
componentDidCatch()
static getDerivedStateFromError()
This is a complete list of lifecycle phases and component lifecycle hooks, which trigger based on each phase and component behavior. We can choose any of them to trigger actions that are reflected into the DOM.
Let’s look at a use case that shows how to render something when the component is added into the rendering phase. We'll use an HTTP call to render the list using different lifecycle hooks.
Render JavaScript with Initial Render
A React component can be created using a function or a class-based component, and the class-based component can use different lifecycle hooks.
But quite often, we need to load data from the server to render the same data into the DOM. To do that, we can use a widely used lifecycle hook called componentDidMount.
The componentDidMount() method will be triggered as soon as the component is mounted or inserted into the DOM.
This method used widely by developers because it loads immediately once the component is mounted. Hence, it’s quite handy when we need to get data from a remote endpoint.
This hook is also used to apply or configure the subscription with the initial render, but we need to unsubscribe it using another hook called componentWillUnmount().
Let’s look at an example of fetching data from a remote endpoint and using the same data into render() to render it into the DOM.
Note: We have used the free API endpoint json-placeholder, which provides the dummy data for the demo purpose.
In the above method, we have used Axios as the HTTP promise-based client, which uses XMLHttpRequests to request data from the browser.
By calling this method, we will be able to call the remote endpoint once the current component is mounted and added into the DOM tree.
Here in the render() method, we have used a map() in order to iterate the items of the todos that are stored in the state object.
In the example, we have implemented:
The componentDidMount() hook that calls the getTodos() method in order to fetch data from the API using AXIOS client
The getTodos() method, where we have implemented an actual AXIOS snippet to get the response
The render() method, where we rendered the data using the map() into the actual DOM tree.
This is one of the basic approaches that developers use in order to work with a remote endpoint to get data after a component is mounted. There are also other ways to do the same thing.
Render JavaScript with Updating Phase
Sometimes we have to call the remote endpoint as soon as we have changes in the state or the props; at times like these, we can use another lifecycle hook called componentDidUpdate().
The componentDidUpdate() hook is used to trigger an action once we find an update in the component, but make sure this hook method does not get called at the time of the initial render of the component.
Note: Before using the componentDidUpdate() hook, we have to wrap it with the condition; otherwise, it will create an infinite loop for the component.
The condition makes sure we don’t re-render the component unless we find the updates in the data. By using the condition along with the hook, we can maintain application performance by restricting the re-render of the component.
Using React Hook to Fetch the Data
We have seen two different examples by which we can make an HTTP call using the HTTP-based client Axios. But sometimes we have to work with the hook function as well.
React provides a different set of hooks that we can use in a functional component. One is called useEffect(), which is pretty similar to componentDidMount() and which that we can use to work with a remote endpoint.
The useEffect hook is a combination of three different lifecycle hooks:
componentDidMount()
componentDidUpdate()
componentWillUnmount()
As you can see, the useEffect hook can be used for the three different purposes, including during the mounting state, updating state, and unmounting phase.
Now let’s jump to the function implementation, where we will make an HTTP call to get the data from the remote endpoint.
Here, we have created the functional component along with useState, which is also a hook in React.
The HTTP get request call is implemented using the Axios as client inside the useEffect hook function. Notice that along with the useEffect hook, an additional argument, [], is provided which means the function will be triggered once as we have not included a count.
Now we have given 5 as a value, the useEffect hook will be triggered five times repeatedly and will execute its content.
Conclusion
In this advanced guide, we learned how to execute JavaScript after a component ia added into the DOM tree, and we have used the lifecycle hook componentDidMount() to make HTTP calls along with the class-based component.
Finally, we have seen how to make HTTP calls using the useEffect() hook. I hope this guide helped you understand when and how to execute JavaScript after rendering the component. Stay tuned for more upcoming guides.