UseEffect Interview Questions

useEffect with an empty dependency array replaces componentDidMount. With a dependency array it replaces componentDidUpdate for specific values. With a cleanup return it replaces componentWillUnmount. React.memo replaces shouldComponentUpdate. useLayoutEffect replaces getSnapshotBeforeUpdate.

Custom hooks extract stateful logic into reusable functions. The use prefix enforces Rules of Hooks via the linter. Return a named object, not a tuple, for non-breaking extensibility. Add AbortController cleanup to prevent race conditions when the URL dependency changes.

Fetch data inside useEffect with async/await, handle loading and error states, and avoid the stale closure and race condition bugs that affect real production code.

Build chained dropdowns where the second options list derives from the first selection. Extend the pattern to API-driven options and three-level chains.

Debouncing delays execution until a user pauses. Build a useDebounce hook with setTimeout and clearTimeout cleanup in useEffect. Use it for search inputs that fetch from an API. Do not debounce client-side filtering — use derived state instead.

Use useEffect to run logic after state updates, and useLayoutEffect when you need to act before the browser paints.

Use useEffect with an empty dependency array to run logic once after the first render, equivalent to componentDidMount.

Use useEffect without a dependency array to run logic after every render, and understand when this pattern is appropriate versus problematic.

Understand what hooks are, the rules that govern them, and how useState and useEffect replace class component state and lifecycle methods.