Higher-Order Component (HOC) Pattern

Question

Accepted Answer

The Higher-Order Component pattern is a powerful technique in React for reusing component logic. An HOC is a function that accepts a component as an argument and returns an enhanced version of that component with additional props or behavior. This pattern is ideal for cross-cutting concerns like authentication, logging, data fetching, and styling. While React Hooks have replaced some HOC use cases, HOCs remain valuable for class components and specific composition scenarios. // Higher-order function concept (precursor to HOCs) const withLogging = (fn) => { return (...args) => { console.log(`Calling ${fn.name} with:`, args); const result = fn(...args); console.log(`Result:`, result); return result; }; }; const add = (a, b) => a + b; const loggedAdd = withLogging(add); loggedAdd(2, 3); // Logs arguments and result // Higher-order object wrapper const withValidation = (obj, validations) => { return new Proxy(obj, { set(target, prop, value) { if (validations[prop] && !validations[prop](value)) { throw new Error(`Invalid value for ${prop}`); } target[prop] = value; return true; } }); }; // Basic HOC for logging props function withLogger(WrappedComponent) { return class WithLogger extends React.Component { componentDidMount() { console.log(`${WrappedComponent.name} mounted with props:`, this.props); } componentDidUpdate(prevProps) { console.log(`${WrappedComponent.name} updated:`, { prevProps, newProps: this.props }); } render() { return ; } }; } // HOC for authentication function withAuth(WrappedComponent) { return class WithAuth extends React.Component { render() { const { user, ...props } = this.props; if (!user) { return

Please log in to view this content

; } return ; } }; } // HOC for data fetching function withDataFetching(url, WrappedComponent) { return class WithDataFetching extends React.Component { state = { data: null, loading: true, error: null }; componentDidMount() { fetch(url) .then(res => res.json()) .then(data => this.setState({ data, loading: false })) .catch(error => this.setState({ error, loading: false })); } render() { return ; } }; } // Using HOCs together (compose) import { compose } from 'redux'; const UserProfile = ({ data, loading, user }) => { if (loading) return

Loading...

; return

Welcome {user.name}, your data: {JSON.stringify(data)}

; }; const EnhancedUserProfile = compose( withAuth, withDataFetching('/api/user-profile'), withLogger )(UserProfile); // Usage // Angular's equivalent uses directives and services // Higher-order component pattern via directive composition @Directive({ selector: '[withLoading]' }) export class WithLoadingDirective { @Input() set withLoading(loading: boolean) { if (loading) { this.renderer.removeChild(this.elementRef.nativeElement, this.content); this.renderer.appendChild(this.elementRef.nativeElement, this.loadingIndicator); } else { this.renderer.removeChild(this.elementRef.nativeElement, this.loadingIndicator); this.renderer.appendChild(this.elementRef.nativeElement, this.content); } } private loadingIndicator: HTMLElement; private content: Node; constructor(private elementRef: ElementRef, private renderer: Renderer2) { this.loadingIndicator = this.renderer.createElement('div'); this.loadingIndicator.textContent = 'Loading...'; this.content = this.elementRef.nativeElement.firstChild; } } // HOC-like service composition @Injectable({ providedIn: 'root' }) export class ComponentEnhancer { withAuth(component: any): any { return class { constructor(public auth: AuthService) {} get isAuthenticated() { return this.auth.isAuthenticated(); } }; } withLogging(component: any): any { return class extends component { ngOnInit() { console.log(`Component ${component.name} initialized`); super.ngOnInit(); } }; } }

Higher-Order Component (HOC) Pattern

A Higher-Order Component (HOC) is a function that takes a component and returns a new component, enabling code reuse, cross-cutting concerns, and component composition.

Higher-Order Component (HOC) Pattern

A Higher-Order Component (HOC) is a function that takes a component and returns a new component, enabling code reuse, cross-cutting concerns, and component composition.

Scenario Questions

Follow-up Questions