What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A higher-order component (HOC) is a function that takes a component and returns a new component with added behavior. To make one dependable, wrap rather than modify the original, pass through the props the wrapped component needs, filter out HOC-only props, and define the enhanced component outside render. HOCs remain useful for component-level reuse and APIs that expect a wrapper, but custom Hooks, context, or ordinary composition may make shared behavior clearer.
What is a higher-order component in React?
A HOC is a composition pattern, not a built-in React API: a function accepts a component and returns an enhanced component. The wrapper can add behavior or data, then render the original component with the props it needs. React’s Higher-Order Components guide is on the legacy documentation site; its composition principles remain useful, while version-sensitive APIs should be checked in current React references.
Think of the HOC as a component factory. For example, a feature-related HOC might obtain a value through a Hook, then provide that value to a wrapped profile component. The wrapped component remains usable on its own because the HOC does not alter its implementation.
Recommended Free Tools
How do I write a React HOC?
Define a function that receives the component, and return a wrapper component. If the wrapper uses a Hook, call it at the wrapper’s top level, following the Rules of Hooks.
#1 Best Overall
function withFeature(WrappedComponent) {
function EnhancedComponent(props) {
const featureValue = useFeatureValue();
return (
<WrappedComponent {...props} featureValue={featureValue} />
);
}
EnhancedComponent.displayName =
`withFeature(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
return EnhancedComponent;
}
const ProfileWithFeature = withFeature(Profile);useFeatureValue and Profile stand for application-defined code; the example illustrates the pattern rather than a complete, tested feature. The HOC may also accept configuration before the component, but keep the returned component’s public interface understandable to its consumers.
Wrap instead of mutating
Do not modify the wrapped component’s prototype or implementation to add behavior. Mutation can make the original component less reusable, make multiple HOCs overwrite one another’s changes, and fail to work for function components. A wrapper adds behavior through composition without changing the component it receives.
Create the enhanced component outside render
Call the HOC at module scope or another stable location, not during a rendering component’s render. Creating a new enhanced component type on each render can cause React to treat it as a different child, resetting state and creating avoidable work. The legacy guide discusses this component-identity issue alongside statics and refs: Higher-Order Components.
How do I pass props through an HOC?
Forward unrelated props to the wrapped component, and consume or remove props that belong only to the HOC. This preserves the wrapped component’s contract and prevents implementation-specific props from leaking to its children or underlying elements.
function withSubscription(WrappedComponent) {
function EnhancedComponent({ source, ...passThroughProps }) {
const data = useSubscription(source);
return <WrappedComponent {...passThroughProps} data={data} />;
}
return EnhancedComponent;
}Here, source is consumed by the HOC, while the remaining props continue to the wrapped component. The names and Hook are illustrative. Decide explicitly which props the wrapper owns and which it forwards; avoid spreading HOC-only props indiscriminately. The legacy React guide recommends passing through props that are not specific to the HOC and describes composing HOCs: Higher-Order Components.
How do I forward refs through an HOC?
Ref handling depends on both the React version and the wrapped component type. In React 19, a function component can receive ref as a prop; new function components no longer need forwardRef for that purpose. React’s React 19 announcement says it plans to deprecate and remove forwardRef in a future version—it has not already been removed.
A ref to a class component still refers to its class instance; it is not passed to the class as an ordinary prop. Therefore, a wrapper must deliberately preserve or route a ref in a manner supported by the React version and the wrapped component. Do not assume that forwarding ordinary props also forwards refs. For older React versions, consult the version-appropriate ref guidance in the legacy HOC guide.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesWhat else should an HOC preserve?
Static properties
A wrapper is a different component, so static methods or properties on the original component are not automatically available on the enhanced one. If consumers depend on statics, decide whether to expose them and how. The legacy guide identifies copying static methods as a concern when wrapping components: Higher-Order Components.
Best Value
Component identity and debugging
Give enhanced components a useful displayName, ideally showing the HOC and wrapped component. Keep the HOC factory stable as described above. These choices make the wrapper easier to identify in component trees and help avoid accidental remounts caused by creating new component types.
Purity and performance
Keep render logic pure: the same props, state, and context should produce the same output, and side effects should not run during render. React explains these expectations in Components and Hooks must be pure. A HOC is not automatically a performance optimization. memo can sometimes skip a parent-triggered render when props have not changed, but React describes it as an optimization rather than a guarantee; a component may still render when its own state or consumed context changes. See React’s memo reference.
Should I use a custom Hook or an HOC?
Choose based on what is being reused and how the consumer should experience it. Custom Hooks share logic among function components without wrapping each one in another component. Context supplies information to descendants without passing it through every intermediate component. Composition lets callers control the structure or children. HOCs provide component-level wrapping and remain useful when a library or existing API expects a component wrapper.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute| Approach | Best fit | Interface and tree impact | Key consideration |
|---|---|---|---|
| Custom Hook | Shared stateful or behavioral logic in function components | Logic is called in the component; no wrapper component is added | Call Hooks at the top level of components or other Hooks; do not pass Hooks around as ordinary values or dynamically transform them into higher-order Hooks. See React calls Components and Hooks. |
| Context | Information needed by descendants across intermediate layers | Consumers read shared context; no prop needs to pass through every layer | Use when the information belongs to a shared tree-level scope; the current Built-in React Hooks reference includes context. |
| Composition | Callers should control child components or structure | Structure is explicit at the call site | Prefer it when flexibility over children is the main goal. |
| HOC | Reusable component-level enhancement or an API that requires a wrapper | Adds a component boundary and may add props | Preserve the wrapped component’s contract; consider refs, statics, identity, and local debugging. |
React’s current reference overview organizes its APIs around components, Hooks, and other built-in features; HOCs are a composition pattern rather than a React API. No option is a universal winner: weigh visibility of added behavior, reuse scope, tree shape, debugging, ref needs, and the project’s supported React versions.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
