Compare HOCs and custom hooks for sharing logic

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.

Source: react.dev