ReactJS Higher-Order Components

Higher-order components (HOC) are an advanced technique in React that is used for reusing component logic. It is the function that takes the original component and returns the new enhanced component.

• It doesn’t modify the input component directly. Instead, they return a new component with enhanced behavior.
• They allow you to reuse component logic across multiple components without duplicating it.
• They are pure functions that accept a component and return a new component.

Syntax:

const EnhancedComponent = higherOrderComponent(OriginalComponent);

• A Higher-Order Component takes a component as input.
• It returns a new component with added functionality.
• The new component behaves like the original but with extra features.

Implementation of the Higher-Order Components

Step 1: Create a React application

Create a React application by using the following command.

npm create vite@latest foldername

Step 2: Move in the Folder

After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Project Structure:

Example 1: Let say, we need to reuse the same logic, like passing on the name to every component.

Output:

• withName adds a name prop with the value "GeeksforGeeks"
• App displays the name inside an <h1> tag
• The wrapped component renders “GeeksforGeeks” in the browser

Example 2: In this example let's implement some logic. Let's make a counter app. In HighOrder.js, we pass the handleclick and show props for calling the functionality of the component.

Output:

Advantages of Higher-Order Components

• Code Reusability: Allows sharing common logic across multiple components.
• Separation of Concerns: Keeps business logic separate from UI code.
• Readability: Makes components cleaner and easier to understand.
• Maintainability: Reduces duplication and simplifies updates.

HOC Usage Tips

• Avoid Overuse: Use HOCs only when necessary.
• Reusable Logic: Apply HOCs for common features like auth or loaders.
• Pass Props: Forward all required props to wrapped components
• Clear Naming: Use meaningful names for easier debugging.