DEV Community

Anfal Ratul
Anfal Ratul

Posted on

Understanding useEffect in React: Managing Side Effects

What's a Side-Effect? 🤔
In programming, side-effects are operations that affect the outside world, such as API calls, DOM manipulation with setTimeout or intervals, and accessing or modifying global objects like document or window. Incorporating these directly into our React components can lead to inefficient re-renders, affecting the performance of our application.

Enter useEffect ✨
To address this issue, React introduced the useEffect hook. This hook enables us to perform side-effects in a controlled manner, executing them after the component has rendered. This helps avoid unnecessary re-renders, ensuring smooth performance for our React applications.

How to Use It:

useEffect(() => {
// Your side-effect code here
}, []); // The second argument is an optional dependency array

What you put inside the dependency array determines when the effect should re-run. Understanding the dependency array is crucial for effectively managing side-effects.

  • An empty dependency array ([]) indicates that the effect runs only once after the initial render. This is useful for effects such as data fetching, setting up subscriptions, or manual DOM manipulation that only need to occur once.
  • A populated dependency array ([dep1, dep2, ...]) means the effect will re-run whenever any of the listed dependencies change. This is ideal for effects that need to update in response to changes in state or props.
  • If no dependency array is provided, the effect will run after every render. This approach is rarely used as it can lead to performance issues, but it's necessary when an effect needs to adjust to every change.

The beauty of useEffect is that it doesn't return anything (undefined), focusing solely on side-effect management.

Top comments (0)