When building web applications with React, managing side effects is a common challenge. Side effects are operations that occur outside the regular flow of a component, such as data fetching, DOM manipulation, and event subscriptions. React provides a solution for this: the useEffect hook.

Understanding useEffect

useEffect is a hook in React that allows you to perform side effects in your functional components. It is a way to manage asynchronous or impure operations within React components. It allows you to specify when these operations should occur, ensuring that they are executed at the appropriate times in the component’s lifecycle. This helps keep your component’s logic organized, prevents unnecessary updates, and aids in resource cleanup when needed.

Learn more about React Hooks here.

Basic syntax of useEffect

The function provided to useEffect is often referred to as the “effect” function, and it is executed when the component mounts (initial render) and whenever the values in the dependencies array change. You can control the timing of the effect by specifying these dependencies or use an empty array to have the effect run only once when the component mounts.

useEffect is typically used for

• Data fetching – to fetch data from an API or database when a component mounts or when certain dependencies change.
• DOM manipulation – to interact with the DOM, for example, to add or remove elements, change CSS classes, or update the title of a webpage.
• Event subscriptions – to subscribe to events or data sources, like WebSocket connections or timers.

Understanding useEffect with different dependencies

useEffect with No Dependency Array

Using useEffect without a dependency array causes the effect to run after every render of the component.

This is suitable for tasks that should run on every update, regardless of specific value changes. Be cautious when using this form, as it can lead to frequent or unnecessary executions of the effect.

useEffect with an Empty

Array ([ ])

When you use useEffect with an empty dependency array, the effect runs only once when the component first mounts and won’t run again for subsequent renders.

This is useful for tasks that should happen only when the component is first displayed, such as fetching initial data or setting up static event listeners.

useEffect with a Dependency Array

When you provide a dependency array, the effect runs when the component mounts and whenever one or more of the listed dependencies change.

This is helpful when you want to respond to changes in specific values, such as updating the UI when a piece of data changes.

Why is useEffect needed?

1. Separation of Concerns: useEffect encourages you to separate your side effects (data fetching, DOM updates, subscriptions) from the main rendering logic. This separation makes your code more organized and easier to understand.
2. Lifecycle Integration: React components have specific lifecycles, like when they first appear on the screen (mount) and when they are updated (re-rendered). useEffect lets you specify exactly when side effects should occur in relation to these lifecycles.
3. Preventing Unnecessary Updates: useEffect allows you to specify dependencies, so you can control when side effects run. This helps avoid unnecessary updates, reducing the load on your app and improving performance.
4. Managing Cleanup: For side effects that need cleanup (like unsubscribing from a data source or removing event listeners), useEffect provides a convenient way to do this when the component is unmounted or when the dependencies change.
5. Consistency: Using useEffect is a consistent and idiomatic way to manage side effects in React. It’s a well-accepted and widely-used approach in the React community.

While it’s possible to write code that achieves similar results without useEffect, doing so can lead to less predictable behaviour, harder-to-maintain code, and potential bugs. useEffect simplifies the process and provides a clear and standard way to handle side effects in your React components.