What is higher order component in react?
Short intuitive definition: A Higher-Order Component (HOC) in React is a function that takes a component and returns a new component — effectively reusing component logic. Think of it as a pattern for sharing behavior between components without repeating code.
Why HOCs exist: React components are primarily concerned with UI, but often multiple components need the same logic (e.g., authentication checks, data fetching, feature toggles). Instead of copying the logic into each component, you wrap the component with an HOC that injects props or behavior. For example, withAuth(UserProfile) might return a component that checks if the user is logged in and either renders UserProfile or redirects to login.
How it looks in code (conceptually):
```js
function withAuth(WrappedComponent) {
return function(props) {
const user = useAuth(); // imagine a hook or context
if (!user) return
A Higher-Order Component (HOC) is one of the coolest and most powerful patterns for reusing component logic in React, especially if you're dealing with older class components or a large legacy codebase. Simply put, a HOC is a function that takes a component and returns a new component. 🤯
Think of it like a decorator or a wrapper for components. It doesn't modify the input component (that's bad practice, called mutation), nor does it use inheritance. Instead, the HOC takes the original component and wraps it inside a container component. This container component then handles the logic—like data fetching, subscription to a Redux store, or user authentication—and passes the relevant data as props to the original component. This lets you share common functionalities across different components without rewriting the same code everywhere. For example, you might have a withAuth(WrappedComponent) HOC to handle login state for multiple pages!
Ah, HOCs! They're definitely an advanced concept, but essential for mastering component reuse in React. My favorite analogy is to think of a HOC as a master chef for your components. The chef (the HOC function) takes your basic dish (your original component) and adds special ingredients and preparation steps (shared logic, state, or props) to it, and then presents a completely new and improved dish (the new component) to the user.
The core idea is composition over inheritance. HOCs emerged from the foundational, compositional nature of React itself and are perfect for tasks like:
* State Abstraction and Reuse: Injecting data from an external source.
* Prop Manipulation: Changing or adding props based on some logic.
* Conditional Rendering: Hiding or showing a component based on a condition (like isLoading).
They're basically a standard way to implement the Decorator pattern in React development.
Deeper perspective / best practices: Historically, HOCs were the go-to way to share logic (e.g., connect from react-redux is a classic HOC). Best practices when using HOCs: (1) preserve statics and display names for debugging (hoist-non-react-statics helps), (2) avoid wrapping components multiple times unnecessarily, and (3) prefer composition and hooks for simpler scenarios.
If you’re working in modern React, reach for custom hooks for stateful sharing between function components; use HOCs when you need to abstract behavior that should look like a prop-injection or render-time behavior for both function and class components. HOCs are still useful in libraries and for migrating older codebases.