Higher-Order ComponentsAdvanced
1Question 1 of 1
javascriptWhat are Higher-Order Components (HOC) in React?
Explanation & Concept
A Higher-Order Component (HOC) is an advanced technique in React for reusing component logic. A HOC is a pure function that takes a component as an argument and returns a new enhanced component.
Code Example
javascript
import React from "react";
export function withAuthentication(WrappedComponent) {
return function AuthenticatedComponent(props) {
const isAuthenticated = Boolean(localStorage.getItem("authToken"));
if (!isAuthenticated) {
return <div>Access Denied. Please log in.</div>;
}
return <WrappedComponent {...props} />;
};
}
// Usage:
// const ProtectedDashboard = withAuthentication(Dashboard);How It Works & Key Takeaways
HOCs wrap components with reusable cross-cutting concerns like authentication, error logging, and analytics tracking.
Mock Test · 1 Questions · Optional
Ready for React Fiber Architecture?
Take a quick test to evaluate yourself, or move straight to the next module.
Advanced1 questions