Compare HOCs and custom hooks for sharing logic
Tests your grasp of React's shift from wrapper-based to function-based logic reuse. Hooks eliminate wrapper hell and implicit props by extracting stateful behavior into plain functions without nesting components. Red flag: calling hooks just sugar.
What's really being asked
This question probes your understanding of the architectural shift from class-based and wrapper-based patterns to function-based composition in modern React. Interviewers want to know if you can articulate why hooks solved concrete problems that HOCs and render props created, rather than simply stating that hooks are newer.
The full answer
First, explain that HOCs are functions that take a component and return a new component, which means they modify the component tree and can lead to wrapper hell with deeply nested JSX. Second, note that HOCs often inject props implicitly, making it hard to trace where data originates and creating potential naming collisions. Third, describe custom hooks as plain JavaScript functions that call other hooks, letting you extract stateful logic without adding nodes to the React tree or hiding prop sources. Fourth, mention that hooks preserve the explicit data flow and compositional model of functions, allowing multiple hooks to be used in a single component without nesting. Finally, acknowledge that HOCs still have valid use cases such as cross-cutting concerns or third-party library integration, but hooks are preferred for behavior reuse.
The mistakes people make
Do not say hooks are just syntactic sugar for HOCs, because they represent a fundamentally different composition mechanism. Avoid claiming HOCs are deprecated, since they remain part of the React API and are still used in some contexts. Do not ignore the rules of hooks, which require calling hooks at the top level and only from React functions, because these constraints are central to why hooks work. Another red flag is suggesting that hooks replace all forms of component composition; they replace logic reuse patterns, not structural composition.
What usually comes next
An interviewer might ask how you would refactor an existing HOC into a hook, or when you would still choose an HOC over a hook. They may also ask about testing implications, since hooks are easier to test in isolation as plain functions compared to HOCs that require component rendering. You might also be asked to compare hooks with render props, or to explain how the rules of hooks are enforced.
A concrete example
Consider a withOnlineStatus HOC that subscribes to browser online events and passes an isOnline prop to a wrapped component. Converting this to a useOnlineStatus hook removes the wrapper component entirely. The consuming component simply calls const isOnline = useOnlineStatus inside its body, keeps its own props untouched, and the logic becomes reusable across both function components and other custom hooks without altering the JSX hierarchy.
Interview question
What fundamental difference distinguishes a custom hook from a HOC when reusing stateful logic in React?
- a.A HOC extracts logic into a plain function while a custom hook injects props implicitly via nesting.
- b.A custom hook extracts logic into a plain function without adding nodes to the component tree.Correct
- c.A custom hook replaces structural composition entirely, making all component wrapping patterns obsolete.
- d.A custom hook is merely syntactic sugar that still creates a wrapper component behind the scenes.
Why? this is the answer
Custom hooks reuse stateful logic as plain functions without adding nodes to the React tree or hiding prop sources, whereas HOCs wrap components and can create wrapper hell. Option D is tempting because it echoes the common misconception that hooks are just syntactic sugar for HOCs, but they represent a fundamentally different composition mechanism.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles