Cleanup Functions are an important concept in React JS that helps developers stop, remove, disconnect, cancel, or undo work started by the useEffect() Hook. They help manage resources such as timers, event listeners, API requests, subscriptions, and WebSocket connections when those resources are no longer needed.
Cleanup functions improve application reliability by preventing duplicate listeners, unnecessary background operations, outdated asynchronous updates, and resource leaks.
Course Link: JustAcademy React JS Training Course
Demo Link: Register for React JS Course Demo
A cleanup function is an optional function returned by the setup function inside useEffect(). React executes it when the previous Effect needs to be stopped before a new setup, or when the component is removed from the React tree.
For example, if an Effect starts a timer, the cleanup function can clear the timer. If an Effect subscribes to a service, cleanup can unsubscribe from it.
import { useEffect } from 'react';
function Example() {
useEffect(() => {
// Setup logic
console.log("Effect started");
return () => {
// Cleanup logic
console.log("Effect cleaned up");
};
}, []);
return <h1>Cleanup Function Example</h1>;
}
export default Example;Explanation:
useEffect() declares an Effect.Cleanup functions are important because some operations continue running independently of React's rendering process. If those operations are not stopped when necessary, they may cause unexpected behavior.
When one or more dependencies change, React runs the previous cleanup function before running the new Effect setup function.
When a component is removed from the React tree, React runs the cleanup functions for its active Effects.
When React Strict Mode is enabled, React performs an additional setup-and-cleanup cycle for Effects during initial mounting in development. This helps detect missing or incorrect cleanup logic.
Component renders
|
v
React commits the UI
|
v
Effect setup executes
|
v
Dependencies change?
|
+---- Yes ----> Previous cleanup executes
| |
| v
| New setup executes
|
+---- No -----> Effect remains active
Component unmounts
|
v
Final cleanup executesImportant: React does not require every Effect to return a cleanup function. Cleanup is needed when the Effect starts work that must be stopped or undone.
The setInterval() function executes a callback repeatedly after a specified interval. Use clearInterval() to stop it when it is no longer needed.
import { useEffect, useState } from 'react';
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setSeconds(previous => previous + 1);
}, 1000);
return () => {
clearInterval(intervalId);
};
}, []);
return <h2>Seconds: {seconds}</h2>;
}
export default Timer;Explanation:
clearInterval(intervalId).The functional state updater previous => previous + 1 uses the latest state without requiring seconds in the dependency array. This avoids recreating the interval whenever the count changes.
The setTimeout() function schedules a callback to execute after a specified delay. The scheduled callback can be cancelled using clearTimeout().
import { useEffect, useState } from 'react';
function Message() {
const [visible, setVisible] = useState(true);
useEffect(() => {
const timeoutId = setTimeout(() => {
setVisible(false);
}, 5000);
return () => {
clearTimeout(timeoutId);
};
}, []);
return (
<div>
{visible && <p>This message disappears after five seconds.</p>}
</div>
);
}
export default Message;Explanation: The Effect schedules a timeout. If the component unmounts before the timeout fires, cleanup cancels it. Clearing a timeout after its callback has already executed does not undo that callback.
Browser event listeners may continue responding to events even when a component no longer needs them. Cleanup removes listeners that were registered by an Effect.
import { useEffect, useState } from 'react';
function WindowSize() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
function handleResize() {
setWidth(window.innerWidth);
}
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return <h2>Window Width: {width}px</h2>;
}
export default WindowSize;Explanation:
Note: This example assumes a browser environment. In server-rendered applications, access to window should be handled safely on the client.
An API request may finish after a component has updated or unmounted. Cleanup can abort supported requests or prevent outdated responses from updating the UI.
import { useEffect, useState } from 'react';
function UserDetails({ userId }) {
const [user, setUser] = useState(null);
const [error, setError] = useState("");
useEffect(() => {
const controller = new AbortController();
async function loadUser() {
try {
setUser(null);
setError("");
const response = await fetch(
`https://jsonplaceholder.typicode.com/users/${userId}`,
{ signal: controller.signal }
);
if (!response.ok) {
throw new Error("Failed to load user");
}
const data = await response.json();
setUser(data);
} catch (err) {
if (err.name !== "AbortError") {
setError(err.message);
}
}
}
loadUser();
return () => {
controller.abort();
};
}, [userId]);
if (error) return <p>Error: {error}</p>;
if (!user) return <p>Loading user...</p>;
return <h2>{user.name}</h2>;
}
export default UserDetails;Explanation:
userId.userId changes or the component unmounts, cleanup calls controller.abort().This example uses the Fetch API, which supports AbortController. For asynchronous operations that cannot be cancelled, a cleanup flag can be used to ignore stale results.
Subscriptions allow a component to receive updates from an external service. Cleanup should unsubscribe when the component no longer needs those updates.
import { useEffect } from 'react';
function Notifications({ notificationService }) {
useEffect(() => {
function handleNotification(notification) {
console.log("New notification:", notification);
}
notificationService.subscribe(handleNotification);
return () => {
notificationService.unsubscribe(handleNotification);
};
}, [notificationService]);
return <p>Listening for notifications...</p>;
}
export default Notifications;Explanation: The Effect subscribes to the notification service. If the component unmounts or the service dependency changes, cleanup removes the same handler from the subscription.
Note: This example assumes the service provides matching subscribe() and unsubscribe() methods.
A WebSocket maintains a persistent connection between a client and a server. Cleanup should remove registered event listeners and close the connection when it is no longer required.
import { useEffect, useState } from 'react';
function LiveUpdates({ url }) {
const [message, setMessage] = useState("");
useEffect(() => {
const socket = new WebSocket(url);
function handleMessage(event) {
setMessage(event.data);
}
socket.addEventListener("message", handleMessage);
return () => {
socket.removeEventListener("message", handleMessage);
socket.close();
};
}, [url]);
return <p>Latest message: {message}</p>;
}
export default LiveUpdates;Explanation: The Effect opens a connection and listens for messages. If the URL changes or the component unmounts, cleanup removes the listener and closes the connection.
Cleanup does not run only when a component unmounts. It also runs before an Effect is set up again because a dependency has changed.
import { useEffect } from 'react';
function ChatRoom({ roomId }) {
useEffect(() => {
console.log("Connecting to:", roomId);
return () => {
console.log("Disconnecting from:", roomId);
};
}, [roomId]);
return <h2>Room: {roomId}</h2>;
}
export default ChatRoom;If roomId changes from "general" to "music", the normal sequence is:
roomId, which is "general".roomId, which is "music".When the component unmounts, React runs the cleanup for the active Effect.
React Strict Mode is a development tool that helps identify bugs in components and Effects. When enabled, React performs an extra setup-and-cleanup cycle for Effects during initial mounting in development.
useEffect(() => {
console.log("Setup");
return () => {
console.log("Cleanup");
};
}, []);You may see the following sequence in development with Strict Mode enabled:
Setup
Cleanup
SetupThis is intentional. It checks whether cleanup correctly reverses the setup. Do not try to hide the extra execution with a ref; make sure every setup has the appropriate cleanup instead.
| Mistake | Problem | Correct Approach |
|---|---|---|
| Not clearing an interval | The timer may continue running when it is no longer needed. | Call clearInterval() in cleanup. |
| Not removing event listeners | Old handlers may continue responding to events. | Remove the same handler using removeEventListener(). |
| Not unsubscribing | The component may keep receiving external updates. | Call the subscription API's matching unsubscribe method. |
| Not handling outdated requests | An older response may overwrite newer data. | Abort supported requests or ignore stale results. |
| Cleanup does not match setup | Resources may remain active or be released incorrectly. | Make cleanup reverse the work started by setup. |
| Assuming cleanup runs only on unmount | Dependency changes can also trigger cleanup. | Account for cleanup before Effect re-execution. |
| Trying to prevent Strict Mode checks | Missing cleanup problems may remain hidden. | Make setup and cleanup safe to repeat. |
clearTimeout() and clearInterval() for scheduled operations.| Feature | Setup Function | Cleanup Function |
|---|---|---|
| Purpose | Starts or establishes work. | Stops, removes, or reverses that work. |
| Execution | Runs when the Effect is set up. | Runs before necessary re-setup and on unmount. |
| Timer example | Creates an interval. | Clears the interval. |
| Event example | Adds an event listener. | Removes the event listener. |
| Connection example | Connects to a server. | Disconnects from the server. |
| Return value | May return a cleanup function. | Usually does not return another cleanup function. |
Answer: It is an optional function returned by a useEffect() setup function to stop, remove, or undo work started by the Effect.
Answer: It runs before an Effect re-executes with changed dependencies and when the component unmounts. Strict Mode can also trigger an extra cleanup cycle in development.
Answer: They help prevent unnecessary timers, listeners, subscriptions, and connections from remaining active.
Answer: Store the interval ID and call clearInterval(intervalId) in the cleanup function.
Answer: Call removeEventListener() with the same event type and handler used to register the listener.
Answer: No. It is required only when the Effect starts work that must be stopped or undone.
Answer: Yes. When dependencies change, React runs the previous cleanup before the new setup.
Answer: React Strict Mode performs an extra setup-and-cleanup cycle to check whether the Effect is implemented correctly.
Answer: It can abort supported requests using AbortController or prevent outdated responses from updating the UI.
Answer: Cleanup should mirror setup and stop or reverse the work that setup started.
useEffect().Cleanup functions are essential for managing resources started by React Effects. They help stop timers, remove event listeners, unsubscribe from services, close connections, and handle asynchronous work when it is no longer relevant.
The key principle is simple: when an Effect starts work that must be stopped or undone, provide the appropriate cleanup. Correct cleanup makes React applications more predictable, maintainable, and reliable.
Official React Documentation: useEffect Reference | Synchronizing with Effects | Lifecycle of Reactive Effects
Learn React JS with JustAcademy: Explore React JS Training | Register for a Course Demo
