A function over components
A higher order component is a function that takes a component and returns a new component with extra behavior baked in. It is a way to reuse cross cutting logic, such as injecting data or requiring authentication, by wrapping rather than editing the original.
- It receives a component as its argument.
- It returns a new wrapping component.
- The wrapper adds props or behavior then renders the inner one.
Caveats to respect
Wrappers must forward unrelated props so the inner component still receives what it expects. They should also copy a sensible display name for debugging and avoid creating the wrapped component inside render, which would remount it every time.
- Always pass through props you did not consume.
- Set a clear display name for the wrapper.
- Create the enhanced component once, not during render.
Higher order components were a dominant reuse tool before hooks, and you still meet them in libraries and legacy code.
Key idea
A higher order component is a function that takes a component and returns an enhanced one, reusing cross cutting logic by wrapping while forwarding props.