Articles → REACT.JS → Control The Behavior Of The “Useeffects” Hooks By Passing Dependencies In React.Js

Control The Behavior Of The “Useeffects” Hooks By Passing Dependencies In React.Js

In this article, we will control the behavior of the useEffects hooks by passing dependencies.

Two Ways Of Controlling The Behavior

In the previous article, we have seen that whenever any element is rendered, the code inside the useEffect hook is executed.

But we can control the behavior in the following manner: -

Code only executes once
Code executes when a specific UI element is rendered

Let us work on an example.

Code Only Executes Once

In this scenario, we pass an empty array as a parameter in the useEffect hook. Consider the following code: -

import React, { useState, useEffect  } from 'react';
import ReactDOM from 'react-dom';


const Home = () => {

    const [name, setName] = useState('Gyan');
    const [country, setCountry] = useState('Australia');

    useEffect(() => {
        alert("this is invoked when the content is rendered");
    }, []);

    const handleNameClick = () => {
        setName('Gyansangrah');
    }
    const handleCountryClick = () => {
        setCountry('India');
    }

    return (
        <div>
            <p>{name}</p>
            <p>{country}</p>
            <button onClick={handleNameClick}>Set Name</button>
            <button onClick={handleCountryClick}>Set Name</button>
        </div>
    );
}


ReactDOM.render(<Home />, document.getElementById('root'));

In the above code, we are passing an empty array in the useEffect hook. So, the code inside the useEffect hook executes only once (i.e., during the page load).

Code Executes When A Specific UI Element Is Rendered

Consider the above code with some modifications.

import React, { useState, useEffect  } from 'react';
import ReactDOM from 'react-dom';




const Home = () => {

    const [name, setName] = useState('Gyan');
    const [country, setCountry] = useState('Australia');

    useEffect(() => {
        alert("this is invoked when the content is rendered");
    }, [country]);

    const handleNameClick = () => {
        setName('Gyansangrah');
    }
    const handleCountryClick = () => {
        setCountry('India');
    }

    return (
        <div>
            <p>{name}</p>
            <p>{country}</p>
            <button onClick={handleNameClick}>Set Name</button>
            <button onClick={handleCountryClick}>Set Name</button>
        </div>
    );
}


ReactDOM.render(<Home />, document.getElementById('root'));

In the above code, we are passing the country variable inside the useEffect hooks. So, the code will be executed when the country variable is changed.

Posted By -	Karan Gupta

Posted On -	Sunday, November 7, 2021

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**