Effect
Effect is the React mechanism for synchronizing with systems outside the render calculation after the screen has updated. That includes subscriptions, timers, browser APIs, and external libraries.
▶Architecture Diagram
🔄 ProcessDashed line animations indicate the flow direction of data or requests
If rendering code performs network calls, starts timers, or mutates external systems directly, repeated renders can duplicate work and make component execution impure. React needs rendering and side effects to stay separate for updates to remain predictable.
Class components spread this kind of logic across lifecycle methods such as mount, update, and unmount. Hooks reorganized that model so developers could think in one line of reasoning: after render commits, synchronize with the outside world, and clean up when it changes or ends.
After a component commits, React runs the Effect. The Effect can connect to some external system and optionally return a cleanup function. That cleanup runs before the next relevant Effect or when the component unmounts. Dependency arrays describe when React should resynchronize.
Creating an external connection and cleaning it up
import { useEffect } from "react";
function ChatRoom({ roomId }: { roomId: string }) {
useEffect(() => {
const connection = createConnection(roomId);
connection.connect();
return () => {
connection.disconnect();
};
}, [roomId]);
return <p>Connected to room {roomId}</p>;
}An Effect synchronizes with an external system after render, and cleanup tears down the previous connection when dependencies change or the component unmounts.
The dependency array explains when to resynchronize
import { useEffect } from "react";
function DocumentTitle({ count }: { count: number }) {
useEffect(() => {
document.title = `${count} notifications`;
}, [count]);
return <span>{count} notifications</span>;
}The dependency array here says that the browser title only needs to be synchronized again when `count` changes.
Effects are not event handlers with a different syntax. Event handlers begin with user actions. Effects begin after render and are meant for synchronization. If something can be done directly at event time or during render calculation, forcing it into an Effect often makes the flow worse.
In practice, the healthiest use of Effects is narrow and explicit. Subscription setup, scroll synchronization, timers, and third-party widget integration fit naturally. Derived values and ordinary calculations usually do not.