Advanced React Hooks: Deep dive into the useEffect Hook

What are React Hooks?#

React is a JavaScript library for designing a web application’s user interface. It uses a component-like structure, where a web page is split into multiple components. Hooks were introduced in React version 16.8. With the help of these Hooks, we can reuse stateful logic and manage a component’s life cycle.

React Hooks are functions that enable developers to manage state and life cycle features in function components, providing an alternative to class components for these purposes while maintaining backward compatibility with classes.

React provides several built-in Hooks that cover a wide range of functionalities:

• useState: Manages state within functional components.

• useEffect: Handles side effects such as data fetching or subscriptions.

• useContext: Access context values directly, eliminating the need for a separate consumer component, not the Context API itself.

• useReducer: Manages complex state logic, offering an alternative to useState.

• useMemo and useCallback: Optimize performance by avoiding unnecessary recalculations and function recreations, as well as by memoizing values and functions.

Here are some advantages of React Hooks:

• Better code composition: Hooks allow life cycle methods to be written in a linear, render-flowing order rather than splitting them among relevant Class components.

• Reuse states and components: Hooks make it easier to share stateful logic between different components. Hooks allow you to reuse stateful logic between components by encapsulating it in custom Hooks. Each component instance still has its own isolated state.

• Better testing: Hooks consolidate stateful logic so it’s all defined in a relevant Hook and is, therefore, easier to test.

• Performance: When optimized, React Hooks allow functional components to perform efficiently, leveraging modern React features.

Class implementation vs. Hook implementation#

When looking at older React legacy code, most likely, you will see something like the following:

The code above uses the componentDidMount method and this.setState to reference and manipulate the posts. This functionality can be replaced by the useEffect and useState Hooks.

To convert the code into a functional component, we’ll:

• Use the useState Hook to manage the posts state.

• Replace componentDidMount method with the useEffect Hook.

• Set the posts state using the setter function provided by useState Hook.

Here’s what the same React code looks like using Hooks:

The useEffect Hook explained#

Our focus will be on the useEffect Hook. It is one of React’s built-in Hooks that allows you to perform side effects in React functional components when the application mounts or when the state or prop gets updated. A side effect could include:

• Data fetching from an external API.

• Manipulating the Document Object Model (DOM).

• Using a timer function like setTimeout() that runs for a certain period.

Let’s take a deeper look at the useEffect Hook to understand how that works. Think of the useEffect Hook as a partial replacement for React life cycle events. The useEffect Hook can replicate the behavior of componentDidMount, componentDidUpdate and componentWillUnmount methods.

In other words, you can respond to changes in any component that contains the useEffect Hook.

Syntax for the useEffect Hook#

The syntax to define the useEffect Hook is as follows:

In the syntax above, we have the following:

• A callback function, callbackFunction, contains the logic that will run when the component renders or updates.

• An optional dependency array, [dependencies]. This array determines when the effect should be re-run. If it’s empty, the effect runs only once on the component mount. If state or props are listed, the effect runs whenever they change.

Note: The dependency array is optional, but the way you use it significantly affects how your component behaves. For example:

• If you provide an empty dependency array, [], then the effect only runs once on the component’s initial render.

• If specific dependencies, [dependency1, dependency2], are provided, then the effect runs only when a value in the dependency array changes.

• If no dependency array is provided, then the effect will run after every render.

The useEffect Hook can be used in different ways to achieve different results depending on the use cases. Let’s look at some of the examples by which we can use the Hook.

Example 1: useEffect with no dependency array#

If no dependency array is provided, the effect will execute every time the component renders. This includes both initial render, and subsequent rerenders triggered by state updates.

In the example below, every time the component renders, useEffect adds a new post to the posts state. This will cause an infinite loop because updating the state (setPosts) triggers a rerender, which in turn triggers useEffect again, continuing indefinitely. You see the “useEffect without dependency array called” message being printed in the console an infinite number of times.

Probable outcomes are that the browser may crash or the application may become unresponsive due to the continuous state updates.

Example 2: useEffect with an empty dependency array#

An empty array [] ensures the effect only runs once after the initial render of the component. This is useful for fetching data on mount, setting up event listeners, or initializing third-party libraries.

In the example below, useEffect sets the posts state to a single post when the component mounts. Upon the first render, the posts state is updated to include “Post 1”. Subsequent renders do not trigger useEffect, so no additional posts are added.

Example 3: useEffect with specific dependencies#

The useEffect Hook with [filter] as its dependency array runs only when the filter state changes. In this example, as the user types into the filter input, the filter state updates, triggering useEffect to filter the mockPosts based on the current filter value.

In the example below, the dependency array filter ensures that useEffect runs only when the filter state changes. Initially, the filter is empty, so all posts are displayed based on the filtering logic. As the user types (e.g., “React”), the list updates to show only posts with titles that include “React.”

Summary of the useEffect dependency array configuration#

Let’s look at the main differences with using the dependency array in the table below:

Multiple useEffect hooks#

When working with useEffect, it is a best practice to use multiple Hooks for different side effects rather than combining unrelated logic into a single useEffect. This approach makes your code cleaner and easier to understand and simplifies debugging and testing.

• Separation of concerns: Assign each useEffect to a specific task, like data fetching or event handling, for modular code.

• Better dependency management: Use separate dependency arrays to ensure effects trigger only when relevant variables change.

• Improved debugging: Isolate effects to quickly identify and fix issues in specific hooks.

• Enhanced readability: Simplify understanding and maintenance by keeping each useEffect focused on a single responsibility.

In the above example, two useEffect hooks are used, each serving a distinct purpose:

1. First useEffect: This filters the posts based on the filter value. It updates the posts state whenever the filter changes. This isolates the filtering logic and avoids unnecessary side effects tied to other state changes.

2. Second useEffect: This logs the posts data to the console every time the posts state changes. This is a separate concern, specifically for logging purposes.

Cleanup works in useEffect#

React provides a way to handle cleanup by returning a cleanup function inside the useEffect callback. This cleanup function is executed when:

• The component is about to unmount (e.g., when the user navigates away).

• Before the effect runs again (if the dependencies change).

This ensures that the resources are freed up appropriately, helping to prevent memory leaks.

The cleanup part in the useEffect Hook removes the resize event listener when the component unmounts, preventing potential memory leaks by ensuring the listener is no longer active after the component is removed from the DOM.

Common pitfalls of useEffect#

Here are some common pitfalls of useEffect:

• When using variables or functions inside a useEffect Hook, React may capture stale values from previous renders if the dependency array is not properly defined. This happens because the closure of a function in the effect may reference the value present when the effect was last executed.

• React compares dependencies by reference for objects and arrays. This means that objects or arrays will always be treated as “new” if they are re-created during each render, causing the effect to run unnecessarily.

• Sometimes, developers accidentally omit variables used inside the dependency array’s effect, leading to unexpected behavior or bugs.

Best practices for useEffect#

• Minimize effects: Keep your useEffect logic concise and focused. Avoid including heavy computations or unnecessary operations that can impact performance. For complex logic, consider breaking it into smaller custom hooks.

• Use dependency arrays wisely: Always specify a proper dependency array to ensure useEffect runs only when intended. Avoid direct state updates inside useEffect without declaring the relevant dependencies to prevent infinite loops.

• Avoid side effects in render: Do not include state updates or asynchronous logic directly within the render method. Instead, use useEffect for such operations to maintain a clean and predictable render cycle.

• Debugging tips: Use console.log statements to inspect values within useEffect and track their execution. Leverage React Developer Tools Profiler to analyze component re-renders and measure the performance of your effects.

• Prefer cleanup functions: If your effect involves setting up event listeners, subscriptions, or timers, always include a cleanup function to avoid memory leaks or unintended behaviors.

Continue learning React Hooks#

Explore these projects for hands-on practice with React Hooks to deepen your understanding of how Hooks work and gain practical experience.

• Create a Trello Clone with React

• Build the Frontend of a Financial Application Using React

• Build a Location Tracker Using Leaflet, ReactJS, and Express.js