What is useEffect in React?

useEffect is a React Hook used to perform side effects in a functional component.

It is commonly used for:

1. Fetching API data.
2. Updating the document title.
3. Using timers (setTimeout, setInterval).
4. Adding event listeners.

5. Running code when a component loads or when state changes.

6. useEffect syntax:

import { useEffect } from 'react';

useEffect(() => {

}, []);

1. Example: useEffect:

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

function App() {

const [count, setCount] = useState(0);

useEffect(() => {
    console.log("Component Loaded");
}, []);

return (
    <div>
        <h1>Count: {count}</h1>

        <button onClick={() => setCount(count + 1)}>
            Click Me
        </button>
    </div>
);

}

export default App;

Output:

• When the component loads → Component Loaded
• When you click the button → Count increases.
• The effect does not run again because the dependency array is empty.
• Three types of useEffect:

Type 1: Without dependency array:

useEffect(() => {
console.log("Runs after every render");

});

Runs after every render.

Type 2: Empty dependency array :

useEffect(() => {
console.log("Runs after initial mount");

}, []);

Runs after the component mounts (in development Strict Mode, React may run an extra setup cycle).

Type 3: With dependency:

useEffect(() => {
console.log("Count changed");

}, [count]);

Runs when count changes.