---
title: "ReactJS | useEffect Hook with Example"
url: "https://magecomp.com/blog/reactjs-useeffect-hook/"
date: "2022-07-27T17:08:14+00:00"
modified: "2025-02-27T09:25:40+00:00"
author:
  name: "Bharat Desai"
  url: "https://magecomp.com"
categories:
  - "ReactJS"
word_count: 405
reading_time: "3 min read"
summary: "Hello React Learners,"
description: "useEffect hook in React will allow to carry out side effects of components in ReactJS. Learn more about useEffect hook with example."
keywords: "ReactJS"
language: "en"
schema_type: "Article"
related_posts:
  - title: "How to Implement Multi-Language in React?"
    url: "https://magecomp.com/blog/implement-multi-language-react/"
  - title: "ReactJS | Component Life Cycle"
    url: "https://magecomp.com/blog/reactjs-component-life-cycle/"
  - title: "ReactJS | useContext Hook with Example"
    url: "https://magecomp.com/blog/reactjs-usecontext-hook/"
---

# ReactJS | useEffect Hook with Example

_Published: July 27, 2022_  
_Author: Bharat Desai_  

![ReactJS useEffect Hook with Example](https://magecomp.com/blog/wp-content/uploads/2022/07/ReactJS-useEffect-Hook-with-Example-1024x512.webp)

**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.
[![React js](https://magecomp.com/blog/wp-content/uploads/2025/02/React-js-CTA-2.webp)](https://magecomp.com/hire-reactjs-developer.html)

## 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]);
```

## [![React js](https://magecomp.com/blog/wp-content/uploads/2025/02/React-js-CTA-3.webp)](https://magecomp.com/services/contact-us/)

## 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**](https://magecomp.com/hire-reactjs-developer.html). Share the tutorial with your friends and stay in touch to learn more about ReactJS.
[![React js](https://magecomp.com/blog/wp-content/uploads/2025/02/React-js-CTA-4.webp)](https://magecomp.com/hire-reactjs-developer.html)

**Happy Coding!**


---

_View the original post at: [https://magecomp.com/blog/reactjs-useeffect-hook/](https://magecomp.com/blog/reactjs-useeffect-hook/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-09-15 17:59:22 UTC_