Posted inReact UI

useEffect Hook in React

October 14, 2023

 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. 

Tags: