Questions
5 of 5
Basics
JSX
Virtual DOM
Reconciliation
State and Props
Components
Class Components
Function Components
Lifecycle functions
Code Sharing
Hooks
useState
useReducer
useMemo
useContext
useCallback
useEffect
Custom Hooks
New Hooks
HOC
Refs
Data Sharing
Events
Context API
Redux
Router
CSR-SSR
React APIs
Performance Optimisation
ReactDOM
Strict Mode
Security
What is the purpose of rerunning the effects?
Difficulty: 5/10
useEffect, dependency array, cleanup
- 1
Strict Mode runs an extra setup+cleanup cycle for every Effect.
- 2
If the Effect has no cleanup logic, so it creates an extra connection but doesn’t destroy it. This is a hint that you’re missing a cleanup function.
- 3
Strict Mode lets you notice such mistakes early in the process. When you fix your Effect by adding a cleanup function in Strict Mode, you also fix many possible future production bugs
- 4
Without Strict Mode, it was easy to miss that your Effect needed cleanup. By running setup → cleanup → setup instead of setup for your Effect in development, Strict Mode made the missing cleanup logic more noticeable.
Scenario Questions
0-2 years experience
- 1You have a component that fetches user data inside a useEffect with an empty dependency array. If you later add a prop `userId` that can change, how would you modify the effect so it runs again when `userId` changes?
- 2What happens if you omit the dependency array in a useEffect that sets up a subscription? Describe the behavior when the component re-renders.
2-5 years experience
- 1In a feature where a search input triggers an API call inside useEffect, the effect sometimes runs twice on each keystroke. How would you debug why the effect is rerunning and fix it?
- 2Explain why adding a state variable to the dependency array of an effect that updates that same state can cause an infinite loop, and how you would restructure the code.
5-8 years experience
- 1You have a large list component that uses useEffect to fetch page data and also sets up a WebSocket listener. Discuss the trade‑offs of placing the listener setup in the same effect versus separate effects, considering cleanup and reruns.
- 2When optimizing performance, how would you decide whether an effect should rerun on every render versus only when specific props change? Give an example where over‑triggering effects harms performance.
8+ years experience
- 1Your team is migrating a legacy class component that uses componentDidUpdate for side‑effects to functional components with useEffect. How would you design a strategy to ensure the effects rerun correctly across many components without introducing bugs?
- 2In a cross‑team shared UI library, some components expose a `refresh` prop that forces internal effects to rerun. What architectural considerations would you evaluate to avoid unnecessary reruns and maintain backward compatibility?
Follow-up Questions
- Can you give an example of a bug that might appear if you forget to include a dependency?
- How does the cleanup function interact with the next effect run?
- When would you intentionally leave the dependency array empty?