This tutorial will cover, What are hooks in react? What is useEffect hook in ReactJS? And an example of useEffect React hooks.

useEffect Hook:

• You can perform side effects in your components with the help of useEffect hook.
• Side effects like fetching data, directly updating the DOM, and setting up timers can be performed using useEffect in react.
• Comparing with React class lifecycle methods, you can consider useEffect as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

It accepts two arguments. The second argument is optional.

useEffect(<function>, <dependency>)

Firstly, you need to import useEffect hook in Component

import {useEffect } from "react";

Runs on every render

useEffect(( ) => {
});

Runs only on the first render

useEffect(( ) => {
}, [ ]);

Runs on the first render And any time any dependency value changes

useEffect(( ) => {
}, [prop, state]);

Effect Cleanup

• Some effects require cleanup to reduce data breach.
• Timeouts, subscriptions, event listeners, and other effects that are no longer needed should be disposed of.
• We do this by including a return function at the end of the useEffect Hook in React.

useEffect(( ) => {
   effect
   return ( ) => {
       cleanup
   }
}, [input])

Example of React useEffect

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";
function Counter() {
    const [count, setCount] = useState(0);
    const [calculation, setCalculation] = useState(0);
    useEffect(() => {
        setCalculation(() => count * 2);
    }, [count]); // <- add the count variable here
    return (
    <>
        <p>Count: {count}</p>
        <button
        onClick={() => setCount((c) => c + 1)}
        >+</button>
        <p>Calculation: {calculation}</p>
     </>
     );
}

Conclusion:

Hope you got the clear idea about React hooks useEffect.