useEffect is a React hook for side effects. Side effects or effects are the operations that can affect other components and can’t be done during rendering. That’s why useEffect accepts a callback function that will run every time there’s a re-render in the component’s state by default. But we can set a dependency array to affect just when our component’s intended state changed, we can put the dependency array as the second argument.

useEffect runs once our component mounts, which means we’re telling React to run our effect function after applying the changes to the DOM.

Where do we need useEffect?

The most popular use case for useEffect is when we need to fetch data from an API.

Example:

Note: If we pass an empty array as the dependency array (second argument of useEffect), then the effect will be applied only once when the component first loaded.


That’s all for this article, I hope you enjoyed and learned a lot.

👋 Hey, I'm Osman Armut
Hi, I'm Osman Armut. I'm a self taught frontend developer that has a great passion for Javascript and React ecosystem. I use articles in my personal learning journey and I like to share my knowledge to help people.

💬 Leave a comment

Your email address will not be published.

We will never share your email with anyone else.