Understanding useEffect in React: Managing Side Effects

Anfal Ratul — Fri, 16 Feb 2024 23:51:25 +0000

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.

Synchronous and Asynchronous in JavaScript

Anfal Ratul — Wed, 14 Feb 2024 17:48:31 +0000

In JavaScript, synchronous operations block instructions until the task is completed, while asynchronous operations can execute without blocking other operations.

Synchronous JavaScript: In a synchronous operation, each step is performed one after the previous one is finished. This means that it blocks or waits for each operation to complete before moving on to the next.

Asynchronous JavaScript: In an asynchronous operation, operations don’t wait for each other to finish. This means multiple operations can be going on at the same time. When you start an operation, you can move on to another operation before the previous one finishes. This is particularly useful for tasks that take a lot of time, such as requests to servers.

For example, if you have a function that fetches data from a server and it takes two seconds to get the response, you wouldn’t want your entire application to stop and wait for these two seconds. Instead, you would want to perform other tasks and deal with the response when it’s ready. This is where asynchronous JavaScript comes into play.

DEV Community: Anfal Ratul

Understanding useEffect in React: Managing Side Effects

Synchronous and Asynchronous in JavaScript