How do you use multiple useEffect in a component? - Coding

useEffect is a hook used to perform side effects in function components. If you need to use multiple useEffect hooks in a single component, you can simply place them one after the other within your component function.

Key Points for Using Multiple useEffect Hooks:

Separation of Concerns: Each useEffect hook should handle a specific side effect or concern. This helps to keep your code organized and easier to understand.
Order Matters: The order in which you define useEffect hooks within your component matters. They will be executed in the same order as they are declared.
Dependency Arrays: Each useEffect can have its dependency array, which specifies when the effect should run. If the dependency array is empty ([]), the effect runs only once when the component mounts. If you provide dependencies, the effect runs whenever any of those dependencies change.
Dependencies Management: Be careful with dependencies to prevent unnecessary re-renders or side effects. Ensure that you include only the necessary dependencies for each useEffect hook.
Readability: Keep your code readable by placing each useEffect hook logically in relation to the component’s behavior. If one effect depends on another, consider placing them close together.

Example: Below is an example of using multiple useEffect in a component. The Timer component utilizes two useEffect hooks: one manages a timer based on the isActive state, while the other triggers an alert at 10 seconds, each with their specific dependencies, alongside functions to control the timer.

Javascript

import React, {
    useState,
    useEffect
} from 'react';
 
function Timer() {
    const [seconds, setSeconds] = useState(0);
    const [isActive, setIsActive] = useState(false);
 
    useEffect(() => {
        console.log("Timer isActive changed:", isActive);
        let intervalId;
        if (isActive) {
            intervalId = setInterval(() => {
                setSeconds((prevSeconds) =>
                    prevSeconds + 1);
            }, 1000);
        }
 
        return () => {
            console.log("Timer cleanup, isActive:",
                isActive);
            clearInterval(intervalId);
        };
    }, [isActive]);
 
    useEffect(() => {
        console.log("Timer seconds changed:",
            seconds);
        if (seconds >= 10) {
            alert('Timer reached 10 seconds!');
            setIsActive(false);
        }
    }, [seconds]);
 
    const startTimer = () => {
        setIsActive(true);
    };
 
    const stopTimer = () => {
        setIsActive(false);
    };
 
    const resetTimer = () => {
        setSeconds(0);
        setIsActive(false);
    };
 
    return (
        <div>
            <h2>Timer: {seconds} seconds</h2>
            <button onClick={startTimer}>Start</button>
            <button onClick={stopTimer}>Stop</button>
            <button onClick={resetTimer}>Reset</button>
        </div>
    );
}
 
export default Timer;

Output:

Output

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
What's the concept of custom hooks, and why do we use them?
What is the benefit of using useReducer with context?
Performance Hooks in React
Context Hooks in React
State Hooks in React

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	9