The Dependency Array

The dependency array in the useEffect hook in React is a crucial parameter that determines when the effect function should be executed or re-executed.

It helps manage side effects within function components, ensuring they are executed at the appropriate times.

Now, let's look at the three different types of dependency arrays that we can specify and also how they affect both synchronization and the lifecycle.

Empty Dependency Array

The effect specified within useEffect with an empty dependency array [] runs only once after the initial render.✍

useEffect(() => {
// logic........
} , []);

If we have an empty dependency array, that means that the effect synchronizes with no state or props, and therefore it will only run on mount. In other words, if an effect has no dependencies, it doesn't use any values that are relevant for rendering the component. So, it's safe to be executed only once.This is great for one-time effects such as creating an event listener.

Dependency Array with Specific Values

When the dependency array contains specific values, the effect will run whenever any of those values change between renders.

useEffect(() => {
// logic........
}, [a, b, c]);

When we have multiple dependencies like in this first example, variables a, b, and c, it means that the effect synchronizes with a, b, and c. In terms of the lifecycle, it means that the effect will run on the initial render and also on each re-render triggered by updating one of the dependencies a, b, or c.

No Dependency Array (Every Render):

When there is no dependency array provided, the effect will run after every render.

useEffect(() => {
// logic........
});

This is usually a really bad idea and not what we want. If the effect runs on every render, that basically means that the effect synchronizes with everything, so essentially every state and every prop in the component will be dependencies in this case.

When are effects executed?

Previously, we learned about the process involved in displaying components on the screen. We remember that by updating state somewhere or during the initial render, a render is triggered, and the next phase is the render phase.

After the render phase comes the commit phase, where React actually writes to the DOM by updating, inserting, and deleting elements.

Finally, the browser notices that the DOM has been updated, and it repaints the screen. The browser repaint is what produces the visual change.

🤔🤔 Now, where do effects fit into this process?

The reason for this delay is significant: it allows React to handle effects asynchronously, which is essential because effects often involve tasks that take time to complete, such as fetching data from an API. If effects were to run synchronously during rendering, they could potentially hold up the rendering process

🤔Let me break this down 👇👇

When React waits to do effects after it shows the component on the screen, it's like saying, "Hey, let's finish showing what we've got to the user first, and then we'll do other stuff."

Now, when we say React handles effects "asynchronously," it means that it doesn't make the user wait for things like fetching data from a server. Instead, it does these tasks in the background while the user can still interact with the page.

Imagine you're waiting for a video to load on a webpage. If the webpage stopped everything to load the video before showing you anything else, you'd just see a blank screen, right? That's what could happen if React didn't handle effects asynchronously.

So, by waiting until after the component is shown to do things like fetching data, React keeps the webpage running smoothly. It ensures that even if there's some heavy lifting to be done, like fetching data from an API, the user can still see and interact with the page without any annoying delays or freezing.

Now, there is actually a gap between the commit and browser paint.🤔

The reason is that, in React, there's another type of effect called a layout effect.

The main difference between a regular effect and a layout effect is that the layout effect runs synchronously before the browser paints the screen, while regular effects run asynchronously after the browser paints.

However, we almost never need this.

So, the React team actually discourages the use of this "useLayoutEffect" hook.

To be continued.❤

Thank you for reading💕.