Questions
8 of 9
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
Implement withLoading HOC
Difficulty: 5/10
higher-order components, loading state management, type safety
When the component mounts, the HOC starts the loading process. Once the loading process is complete, the HOC sets the isLoading state variable to false. The HOC then renders the wrapped component if the isLoading state variable is false. Otherwise, the HOC renders a loading spinner.
javascript
javascript
Scenario Questions
0-2 years experience
- 1How would you create a withLoading HOC that shows a spinner while a wrapped component's data prop is undefined?
- 2If you wrap a component with withLoading and the loading prop never changes, what will the UI render?
- 3What happens if you forget to forward refs in your HOC?
2-5 years experience
- 1We have a component that fetches data via useEffect and we want to reuse loading UI across many components. Walk me through how you'd refactor using withLoading, and what trade‑offs you consider regarding props and re‑renders.
- 2During a code review you notice the withLoading HOC causing an extra render that leads to a flicker. How would you debug and fix it?
- 3If the wrapped component receives both loading and error props, how would you extend withLoading to handle error states without breaking existing usage?
5-8 years experience
- 1Our app uses server‑side rendering and code‑splitting. How would you design a withLoading HOC that works correctly in both client and server environments, and what performance implications does it have?
- 2When many components are wrapped with withLoading, we see a memory leak due to stale subscriptions. Explain how you'd structure the HOC to avoid this and ensure cleanup.
- 3Discuss how you would type the withLoading HOC in TypeScript to preserve the wrapped component's props while adding loading, and why that matters for large codebases.
8+ years experience
- 1Our organization is moving from class components to function components with hooks, but legacy code still uses a withLoading HOC. How would you plan a migration strategy that minimizes risk and keeps loading behavior consistent across teams?
- 2Multiple teams have different conventions for loading UI (spinners, skeletons, etc.). How would you design a configurable withLoading HOC or pattern that can be shared across the org while allowing team‑specific customization?
- 3Consider a micro‑frontend architecture where each micro‑app may have its own loading indicator. How would you architect a cross‑app withLoading solution that respects bundle boundaries and avoids duplicate code?
Follow-up Questions
- What would you do if the loading flag comes from Redux instead of local state?
- How does your HOC affect the component's displayName for debugging?
- Can you describe how you would unit test this HOC?