Implement withLoading HOC

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

Difficulty: 5/10

Topics: higher-order components, loading state management, type safety

Scenario Questions

0-2 years experience

1
How would you create a withLoading HOC that shows a spinner while a wrapped component's data prop is undefined?
2
If you wrap a component with withLoading and the loading prop never changes, what will the UI render?
3
What happens if you forget to forward refs in your HOC?

2-5 years experience

1
We 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.
2
During a code review you notice the withLoading HOC causing an extra render that leads to a flicker. How would you debug and fix it?
3
If 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

1
Our 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?
2
When 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.
3
Discuss 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

1
Our 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?
2
Multiple 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?
3
Consider 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?