Before moving into code and detail let us first understand why we need it and what problem does it solves.

The most broad answer to this is - useEffect solves the problem of handling side effects in React function components. 

Side effect is anything a React component depends on or interacts with that React itself does not manage. For example we can say that when our component loads for the first time, it needs to subscribe to web api  services, start a setTimer call or set up a event listner, or fetch data from external api. The same can again be true when our coponent re-renders because of any reasons.

So we can say that when react component loads or re renders then do some extra work. These extra works are side effect that our component should do and useEffects manages all these side effects.

Things to note here is useEffect does not run immediatly after we change the state but after react does re-render, sync the data with the UI and then it perform the extra work, or side effect work, I mean run the useEffect. 

Let us now see the syntax of useEffect and later we will see all the use cases -

```
useEffect(
  () => {
    // ... runs for side effect, to sync component
    return () => {
    // cleanup function (optional)
  };
},
[] //optional
);

```

We can see on the above code that the useEffect syntax has three things - 
- A callback function passed, it is also called as effect function.
- A return function – also called as a cleanUp function – this is optional
- A dependency array [] - optional but very important.

Now let us see how useEffect runs - 

So to understand this we will need four cases - 

### First – when we dont provide dependency array and clean up function.

Here since the useEffect is not depending on anything, it will run everytime our component re-rendres and on the first load. This can be helpfull to check the value of any component state after the re-render.  

If we click on button to change bool value from true to false and again false to true, and so on, this useeffect will run on every state change or technically after every re-render due to state change.


```
export default function MyComponent() {
  const [bool, setBool] = useState(false);
  useEffect(() => {
    console.log(bool);
  });

  return (
    <button
      onClick={() => {
        setBool(!bool);
      }}
    >
      Button
    </button>
  );
}

```

### Second – with empty dependency array [] 

This useEfeect will only run when our component mounts or renders for the first time. Since this has a empty dependency array, so we can say that this does not depends on any other value. Just run it once when component loads.

Even if we do state change here, change the value of bool from false to true, our component will re-render due to state change but the useefect function will not run. 


```
export default function MyComponent() {
  const [bool, setBool] = useState(false);
  useEffect(() => {
    // do something when component loads for the first time
  }, []);

  return (
    <button
      onClick={() => {
        setBool(!bool);
      }}
    >
      Button
    </button>
  );
}

```

### Third – with dependency value in array

In this case we will first see the code and then understand - 

```
export default function MyComponent() {
  const [value1, setValue1] = useState(false);
  const [value2, setValue2] = useState(true);
  useEffect(() => {
    // runs when value1 changes
    console.log(value1);
  }, [value1]);

  return (
    <div>
      <button
        onClick={() => {
          setValue1(!value1);
        }}
      >
        Button 1
      </button>
      <button
        onClick={() => {
          setValue2(!value2);
        }}
      >
        Button 2
      </button>
    </div>
  );
}

```

Here we have two states and two buttons, and clicking on any button will cause our component to re-render, but our useEffect depends only on value1, so if we update value2 our component will re-render but our useEffect will not re run again. It will only run on first load of the component and whenever the value1 changes, because it depends on value1.

### Fourth – with return or clean up function

With this we will also try to understand what is side effect in real world. 

So for example we will do is when our component loads we will try to subscribe to an event listner, and that event listner will read the value when we go offline and come back online again. In simple words when our browser looses the internet connection and when it gets back, you might have seen this functionality on some websites. 

Here checking for interent availability is the extra work that our component needs and this is not managed by react itself but by event listners. So here we will perform the side work, the work to do after our component loads, so that our component has this facility.



```
export default function MyComponent() {
  useEffect(() => {
    function online() {
      alert("Internet Connection Found!");
    }
    function offline() {
      alert("Intetnet Connection Lost!");
    }
    window.addEventListener("online", online);
    window.addEventListener("offline", offline);
    return () => {
      window.removeEventListener("online", online);
      window.removeEventListener("offline", offline);
    };
  }, []);

  return (
    <div>
      <p>subscribe to event listner </p>
    </div>
  );
}

```

Check that our useEfect here has a [] dependency array, which means this will run only after the first load of the component, and then it will subscribe to event listner of window object. So we will get our event listner working all the time. 

Even if we move from this component to other component this event listner will be present, and so to remove the listners we will use the clean up method of useEffect.

Clean up method can be best described as – if our useEffect sets something outside react, it should also clean it. 

We will see when return function runs in detail after this example-


```
  const [userId, setUserId] = useState(1);
  useEffect(() => {
    const intervalId = setInterval(() => {
      // reading api data from extarnal source after every 1000 ms
    }, 1000);

    return () => {
      // clean up the setInterval,
      clearInterval(intervalId);
    };
  }, [userId]);

```

here we are starting a setInterval whenever our userId change, this setInterval is managed by web api, so we should also clean (remove) the previously created setInterval whenever userId changes.

**To understand when return function actually runs - **

See that in second example the cleanup function will run whenever we change the value of userId. So suppose first the userId was 1 – it will create a setInterval, now when we change the userId to 2, it will first run the cleanup function, remove the setInterval for user1 and then set the value of userId as 2.

The cleanup function runs when a dependency changes, before the effect function runs again. And it also runs when component unmounts.

The below is wrong, it create multiple setInterval based on users. 


```
  useEffect(() => {
    setInterval(() => {
      console.log(userId);
    }, 1000);
  }, [userId]);

```

### Let us see some common use cases of useEffect.

We have already seen how it helps in synchronizing our component with external factors, in setTinerval and event listner example. 

Let us now see one most useful case – to fetch data from api


```
  useEffect(() => {
    // fetch data when our component loads
  }, []);

```

empty dependency array [] means this useEffect will run only once and fetch the required data on component load.

We can also fetch based on state and props value, and so whenever our props or state change useEffect will again fetch the data,


```
export default function MyComponent({ userId }) {
  useEffect(() => {
    // fetch data when our component loads
  }, [userId]);

  return <p>fetch data</p>;
}

```

## Few Impotant Points -

- Every state, props used inside useEfeect should always be placed in the dependency array


```
const [value1, setValue1] = useState(false);

useEffect(() => {
    console.log(value1);
}, [value1]); // we can not leave it as [] while using value1 inside useeffect

```
- We should not setState the value in useEffect that are present in the dependency array, it will create an infinite loop

In our example value1 will change inside useEffect and since it is dependen to that value it will again re run and create an infinite loop


```
const [value1, setValue1] = useState(false);

useEffect(() => {
   setValue1(true)
}, [value1]); // this will create an infinite loop.

```

- With managed by reference data type


we know that
```
console.log([] == [])
```
because the reference of both the array are not same.

Also we know that react check the refernce of data to know about the old vs new. So when we define any data type that is managed by reference and when our component re-renders it will create a new reference for that data, because component is a js function and it is running again so all data inside functions are new created.


```
export default function Home() {
  const [bool, setBool] = useState(false);
  const d = [];

  useEffect(() => {
    console.log("234");
  }, [d]);

  return (
    <button
      onClick={() => {
        setBool(!bool);
      }}
    >
      Button
    </button>
  );
}

```
Here when every we click on button state changes and so component re-renders and we get a new d everytime. The reference is new, funciton is re running again, so all local variables of that function is getting re-created again. 

Now on every re-render d is new, so our useEffect will run everytime. 

This is somehow managed by react is latest version 19. to test this install previous versinos of react.

###  When Not to use useEffect - 

We should try to limit its use and only use for synchronizing our component with external factors or side effects. 

For example, we should not do this -


```
export default function MyComponent() {
  const [value1, setValue1] = useState("");

  useEffect(() => {
    // do something here with value1, that is abc
  }, [value1]);

  return (
    <button
      onClick={() => {
        setValue1("abc");
      }}
    >
      Button
    </button>
  );
}

```
but rather -

```
    <button
      onClick={() => {
        // do something here with abc
        // and if required, set abc value in state
        setValue1("abc");
      }}
    >
      Button
    </button>

```

- React by default runs in Strict Mode, that means our component run twice in the development mode, first it mounts, then unmounts and then finally mounts. So our useEffet will also run twice during mount. This is done to check any  side effect is not cleaned up properly, because we know cleanup funciton runs on component unmount.   This helps us to indentify any web api subscriptions that leak memory, i mean is re subscribed without cleanup or are we manually mutating the state, which we should not do.  



I hope useEffect is now clear for eveyone.

Do also check the [useState](https://www.ranuvijay.me/blogs/usestate-in-react-js) blog

And other [React.Js](https://www.ranuvijay.me/blogs/categories/react-js) topics

Thanks!


In this blog we will learn about useEffect, why we need useefect, how to use it and what problem does it solve

React useEffect - how to use it

Contact Me

I want to hear from you