ReactJS | useEffect Hook with Example

Hello React Learners,

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

So let’s discover React js useEffect Hook.

What are Hooks in React?

ReactJS hooks allow using additional react features like managing state and performing after effect. React hook function allows using react features without writing a class. ReactJS hooks are backward-compatible. In version 16.8, ReactJS hooks were added.

Rules of Hooks in React:

• Only call Hooks inside React function components.
• Only call Hooks at the top level of a component.
• Hooks must not be conditional.

So you got the idea about ReactJS hooks, now let us learn about React useEffect hook.

useEffect Hook in React

• 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 Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

useEffect hook React accepts two arguments. The second argument is optional.

useEffect(<function>, <dependency>)

Firstly, you need to import useEffect hook in React

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. If you face any problem, you can ask me in the comment box or Hire a React Developer. Share the tutorial with your friends and stay in touch to learn more about ReactJS.

Happy Coding!