React useEffect

`useEffect` lets a React component synchronize with systems outside React after a render, such as subscriptions, timers, or browser APIs. An effect may return cleanup logic that runs before the effect is re-run and when the component is removed.

`useEffect` is a React Hook for work that should happen because the component has rendered. Typical uses include connecting to an external data source, subscribing to events, starting a timer, or updating a non-React API. It is not generally needed for calculations that can be performed during rendering.

The effect receives a setup function. React runs that setup after the component commits, and the setup can return a cleanup function. Cleanup is used to undo or stop whatever the setup created, such as removing an event listener or unsubscribing from a subscription.

The dependency array controls when React re-runs the effect. With no dependency array, the effect runs after every commit. With an empty array, it does not re-run because of changing reactive values, while dependencies such as `[roomId]` cause it to re-run when those values change. Dependencies should reflect the reactive values used by the effect.

A useful pattern is to make setup and cleanup correspond: setup establishes one external connection, and cleanup removes that same connection. In development, React Strict Mode can intentionally perform an extra setup-and-cleanup cycle to expose effects that do not clean up correctly.

Key points

• Use `useEffect` to synchronize React with an external system.
• Effects run after rendering has committed.
• Return cleanup logic for subscriptions, timers, listeners, and similar resources.
• The dependency array determines when an effect is re-synchronized.
• Avoid effects for values that can be derived directly during rendering.

Interview questions

When should you avoid `useEffect`?

You should avoid an effect when the value can be calculated directly from props or state during rendering. Adding an effect for derived data can introduce an unnecessary render cycle and more state-management complexity. Effects are intended for synchronization with external systems, not as a general mechanism for every piece of component logic. Event-specific behavior usually belongs in an event handler instead.

What is the significance of Strict Mode and effect cleanup during development?

In development, React Strict Mode can deliberately run an additional setup and cleanup cycle for an effect. This helps reveal effects whose setup is not properly mirrored by cleanup. Production behavior is not identical to this development stress test. An effect should therefore be written so that repeated setup followed by cleanup is safe.

What problem does `useEffect` solve?

`useEffect` is used when a component needs to synchronize with something outside React. Examples include subscriptions, timers, browser APIs, and other external resources. React runs the effect after the component commits. The effect can return cleanup code to stop or undo the external work.

What does the dependency array do in `useEffect`?

The dependency array tells React which reactive values the effect depends on. When a dependency changes, React cleans up the previous effect and runs the setup again. An empty array means the effect does not re-run because of changing reactive dependencies. Omitting the array causes the effect to run after every commit.

Why does an effect need cleanup?

Cleanup prevents resources created by an effect from continuing after the synchronization is no longer needed. For example, an effect that adds an event listener should remove that listener during cleanup. React also runs cleanup before re-running an effect whose dependencies changed. This keeps the external system aligned with the component's current state.