How is HOC different from the wrapper component?
While both patterns involve wrapping a component to extend its functionality, they differ fundamentally in how they are implemented and when they are executed.
- 1
A wrapper is a regular component that uses the children prop to nest other components inside it. It is defined in your JSX at runtime.
- 2
You wrap the target component inside the wrapper’s tags.
- 3
Best for: UI layout, styling (like a Card or Layout wrapper), and providing Context (like a ThemeProvider).
- 1
An HOC is a function that receives a component and returns an enhanced version of it. It happens at definition time (usually outside of your render method).
- 2
You pass your component into a function.
- 3
Best for: Injecting specific props, hijacking renders, or sharing complex logic that doesn't necessarily need a UI wrapper.
Scenario Questions
- 1
You need to add logging to an existing button component without touching its source. Would you choose a HOC or a wrapper component, and how would you implement it?
- 2
If you wrap a component with a HOC that injects a new prop, what happens to the original component's ref, and how would you preserve it?
- 3
Describe the JSX tree you get when you use a wrapper component versus when you use a HOC around the same base component.
- 1
Your team added a theme‑injecting HOC, but after a refactor some components stopped receiving the theme. How would you debug this, and what differences between HOCs and wrapper components might cause the breakage?
- 2
When adding authentication checks, what factors would lead you to pick a HOC over a wrapper component regarding reuse and testability?
- 3
You notice that a HOC adds an extra layer to the component tree and impacts render performance. How would you decide whether to switch to a wrapper component?
- 1
In a large codebase you have both HOCs and wrapper components providing similar functionality. How would you consolidate them to reduce duplication while keeping existing APIs stable?
- 2
Explain how server‑side rendering interacts differently with HOCs versus wrapper components, and what implications that has for SEO‑critical pages.
- 3
If a HOC adds stateful logic that must be shared across many components, what scalability concerns arise compared to using a wrapper component with React context?
- 1
Your organization is migrating from class components to functional components with hooks. How would you plan the transition for existing HOCs, and would you replace them with wrapper components or custom hooks?
- 2
Multiple teams use either HOCs or wrapper components for cross‑cutting concerns, leading to inconsistency. How would you establish a guideline or architectural decision to standardize this, considering maintainability and bundle size?
- 3
A legacy library provides a HOC for data fetching, but you now need to support both web and React Native. What architectural changes would you recommend regarding HOC versus wrapper component usage?
Follow-up Questions
- ❓What are the trade‑offs of using a HOC versus a wrapper component?
- ❓How does each approach affect ref forwarding?
- ❓Can you give an example where one is clearly preferable?