How does work useEffect Hook in ReactJS – With Live Example | What is the useEffect Hook in React with an example | How the useEffect Hook Works with Examples

One of ReactJS’s most potent features is the useEffect Hook. It lets you to side effects in your functional components, such modifying the DOM, creating timers, retrieving data from an API, and subscribing to events. These actions could only be completed inside class component lifecycle methods like componentDidMount() or componentDidUpdate() prior to the introduction of Hooks.

You can now carry out all of these tasks inside functional components with useEffect, which simplifies and cleans up your code. The dependency array allows you to decide when the hook re-runs after the component has been displayed.

In this article, we’ll build a simple live example where we create a timer that increments every second. You’ll learn how to:

👉 Download Free Ebook →

👉 Get Complementary →

🔑 Key Concepts:

Initialize a timer using setInterval
Use useEffect to start and clean up the timer
Manage side effects cleanly with cleanup functions

✅ Example: Simple Timer using useEffect Hook

🧩 React Functional Component (HTML + JavaScript)

 import React, { useState, useEffect } FROM 'react';

```
 
```
```
FUNCTION TimerApp() {
```

  const [seconds, setSeconds] = useState(0);

```
 
```
```
  useEffect(() => {
```
```
    // SET up INTERVAL
```

    const INTERVAL = setInterval(() => {

```
      setSeconds(prev => prev + 1);
```
```
    }, 1000);
```
```
 
```
```
    // Cleanup FUNCTION
```

    RETURN () => clearInterval(INTERVAL);

  }, []); // Empty array means this runs ONLY once after initial render

```
 
```
```
  RETURN (
```

    <div STYLE={{ fontFamily: 'Arial', padding: '20px' }}>

      <h2>⏱️ Timer WITH useEffect Hook</h2>

      <p>Seconds Elapsed: <strong>{seconds}</strong></p>

```
    </div>
```
```
  );
```
```
}
```
```
 
```
```
export DEFAULT TimerApp;
```

The useEffect hook is essential for side effects in modern React applications. Whether you’re working with APIs, timers, event listeners, or external libraries — useEffect helps you control when and how those effects run. Mastering this hook will prepare you for real-world scenarios like data fetching, dynamic components, and complex interactivity.

🔑 Key Concepts:

useEffect runs after the component renders
Cleanup (return () => clearInterval()) avoids memory leaks
Empty dependency array [] means effect runs only once.

FAQ (Frequently Asked Questions)

How does the useEffect() Hook get executed?

The React useEffect hook runs after the component is rendered and whenever the count variable changes, the effect function updates the document title to the current count. Notice how we passed the count variable in the dependency array to tell React that every time the count changes, we want our effect to be re-run.

Can we use two useeffects in React?

Yes, you can use multiple useEffect hooks in a single component, and they will run in the order they are defined. This is useful for organizing different side effects or separating concerns within a component.

Can I use useEffect without dependency array?

What Happens When useEffect Has No Dependency Array? If you do not pass a dependency array to the useEffect hook, it will execute the effect after every render of the component. This is because the effect does not have a specified dependency array, meaning it will run every time the component updates.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

🔑 Key Concepts:

✅ Example: Simple Timer using useEffect Hook

🔑 Key Concepts:

How does the useEffect() Hook get executed?

Can we use two useeffects in React?

Can I use useEffect without dependency array?

Related Topics | You May Also Like

Vijay Kumar