Questions
2 of 9
1What are Higher-Order components?
2Give some examples of Higher-order components
3Can we mutate the inner function/ wrapped function?
4Can we pass ref through higher order components?
5List some use cases for higher-order components and implement them.
6Can we use HOC inside the render method?
7How is HOC different from the wrapper component?
8Implement withLoading HOC
9Implement withAuthentication HOC
reactreact
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
02 / 09

Give some examples of Higher-order components

HOCs are common in third-party React libraries,
  1. 1

    Redux’s connect()

  2. 2

    React.memo()

  3. 3

    withRouter()

  4. 4

    createFragmentContainer()

  5. 5

    Error Boundary function

  6. 6

    Relay’s createFragmentContainer.

Difficulty: 5/10
Topics: reusability, props injection, render props

Scenario Questions

0-2 years experience
  1. 1

    We have a Button component that needs to log clicks for analytics. How would you create a higher‑order component to add this logging without changing the Button code?

  2. 2

    If you wrap a component with a HOC that adds a new prop, what happens to the original component’s propTypes and defaultProps?

2-5 years experience
  1. 1

    Our team introduced a withTheme HOC, but after a recent refactor the UI stopped receiving the theme prop. Walk me through how you would debug the issue.

  2. 2

    When deciding between using connect from Redux versus a custom withAuth HOC, what factors would influence your choice in a feature that requires both authentication state and UI theming?

5-8 years experience
  1. 1

    We have a page that composes three HOCs (withRouter, withPermissions, withFeatureToggle). Performance profiling shows extra renders. How would you redesign or optimize this composition?

  2. 2

    Explain how you would implement a generic HOC that forwards refs correctly while also injecting props, and why ref forwarding matters in a large component library.

8+ years experience
  1. 1

    Our legacy codebase uses many HOCs for cross‑cutting concerns, but the new team prefers hooks. How would you plan a migration strategy that minimizes risk and maintains backward compatibility?

  2. 2

    At a system‑level, what are the architectural trade‑offs of relying heavily on HOCs for concerns like logging, error handling, and theming across multiple product lines?

Follow-up Questions

  • ❓What problems can arise if you stack many HOCs together?
  • ❓How would you test a component that is wrapped by an HOC?
  • ❓Can you achieve the same result with hooks, and what trade‑offs exist?