How To Only Call A Function Once In React?

Posted on by Nathaniel Kirk
how to only call a function once in react

If you don’t know how to only call a function once in React, don’t worry. Learn more about it with the explanation and examples below. Let’s go into detail now.

The life cycle of component

The life cycle of a component in Reactjs is the process of creating, modifying, and destroying a component.

It consists of 3 stages:

  • Mounting (Mounting)
  • Update
  • Cancel (UnMounting)

Mounting:

Mounting means something to which something else is or can be attached. Surely you all know the concept of hooks, i.e. Allowing users to interfere in the UI update process with changes in State or props.

Three lifecycle methods are:

  • componentWillMount()
  • render()
  • componentDidMount()

Updated:

When State changes:

  • Update value for the State
  • Call shouldComponentUpdate()
  • The component will call update() – provided the above function returns true.
  • Call render() function
  • Call componentDidUpdate() function

Unmount:

The unmounting process occurs when the component is removed from the DOM. In other words, the component unmount function will be called when no components are rendered or the user redirects the web page.

Only call a function once in React

Call function when component mount

Syntax:

useEffect(callback, dependency);

Parameter:

  • Callbacks:
    • As a function.
    • No parameters are accepted.

Inside contains effects that need to be handled.

They will be executed when the component is mounted on the first render and called again if one of the values ​​in the dependency array changes.

Always return either another function (called cleanup) or undefined.

Mandatory transmission

  • Dependency:

As an array of dependencies, which determines whether to call back the effects in the callback:

+ If nothing is passed, by default, the effects will be called again after each render.

+ If you pass an empty array, the effects will ONLY run on the first render.

Option to pass in or not.

So, if you want the function to run only once, you can use the useEffect hook’s mounted component mechanism.

Code:

import React, { useEffect } from "react";
 
export default function App() {
    useEffect(() => {
      	console.log("Component did mount");
    }, []);

    return <div id="App"></div>;
}

Output:

Component did mount

If you put an empty array in the dependencies of the useEffect() hook, when the component mounts, the function inside the hook will only be called once.

Call function when component unmount

In this way, we also use the useEffect hook, but we will call the function when the component unmounts, and it will only run once. Take a look at the example below to understand more.

Code:

import React, { useEffect } from "react";
 
export default function App() {
    useEffect(() => {
        return () => {
          	console.log("Component did unmounted");
        };
    }, []); 
    return <div id="App"></div>;
}

 Output:

Component did unmounted

When we code like the example above, the function will only be called once when the component did unmount. The console.log screen will only show up once.

Summary

To summarize, this article shows you how to only call a function once in React. You should call the function when the component mounts or unmounts to do it.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *