What is an external system with which useEffect allows syncronisation?

These systems aren’t controlled by React, so they are called external. An Effect lets you keep your component synchronized with some external system. such as:

1
A timer managed with setInterval() and clearInterval().
2
An event subscription using window.addEventListener() and window.removeEventListener().
3
Connection to network
4
some browser API, or
5
a third-party library, A third-party animation library with an API like animation.start() and animation.reset().

Difficulty: 5/10

Topics: useEffect, external synchronization, cleanup

Scenario Questions

0-2 years experience

1
You need to fetch a user's profile when a component mounts and store it in state. How would you write the useEffect for that?
2
Describe how you would add a window resize listener in a component and ensure it is removed when the component unmounts.
3
If you omit the dependency array in a useEffect that fetches data, what will happen on each re‑render?

2-5 years experience

1
A chat widget should open a WebSocket when the user opens the chat and close it when they leave. Walk me through the useEffect implementation and any edge cases you’d watch for.
2
We want to debounce an API call based on user typing. How can you coordinate the timer with useEffect and guarantee the timer is cleared correctly?
3
During a review you see a useEffect that fetches data but doesn’t list the fetch function in its dependency array, causing stale results. How would you fix it and why?

5-8 years experience

1
Our dashboard renders dozens of widgets, each polling a different endpoint with setInterval inside useEffect. How would you design the effect to avoid memory leaks and unnecessary re‑renders at scale?
2
We need to integrate a third‑party analytics library that requires one‑time initialization and also needs to react to route changes. How would you structure useEffect(s) to handle both without duplicate initializations?
3
Explain how you would test that a component correctly synchronizes with an external subscription using useEffect, covering cleanup and potential race conditions.

8+ years experience

1
Our codebase is moving from class components to hooks. What guidelines would you set for converting lifecycle methods that interact with external services (e.g., componentDidMount/WillUnmount) to useEffect, and how would you enforce consistency across teams?
2
We plan to introduce a global state solution that relies on external event streams. How would you architect useEffect usage across many components to avoid redundant subscriptions and centralize cleanup while keeping performance and bundle size in mind?
3
Discuss the trade‑offs of extracting side‑effect logic into custom hooks versus keeping it inline, especially when dealing with complex external systems like websockets or IndexedDB.

Follow-up Questions

❓What could go wrong if you forget to return a cleanup function?
❓How does the dependency array prevent stale closures?
❓When would you split logic into multiple useEffect calls?