Higher-Order Components in React

In React, a higher-order component (HOC) is a powerful pattern for reusing component logic. It’s not directly provided by React but rather a pattern that arises from React’s component composability. Essentially, a higher-order component is a function that takes a component and returns a modified version of it.

let’s see a example involving a higher-order component (HOC) for managing authentication in a React application. Imagine you have components for displaying information about different types of users: Student and Teacher.

Here’s how you might create a higher-order component to handle authentication:

import React from 'react';

const withAuth = (WrappedComponent) => {
  const isAuthenticated = /* Your authentication logic */ true;

  // Return a new component
  return class extends React.Component {
    render() {
      if (isAuthenticated) {
        // If authenticated, render the wrapped component
        return <WrappedComponent 
                  isVerified={isAuthenticated} 
                   {...this.props} 
                />;
      } else {
        // If not authenticated, render a message or a login prompt
        return <h3>Please log in to view this content.</h3>;
      }
    }
  };
};

const Student = (props) => {
  return (
    <div>
      <h2>Student Information</h2>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
      <p>Grade: {props.grade}</p>
      <p>Verified: {props.isVerified}</p>
    </div>
  );
};

const Teacher = (props) => {
  return (
    <div>
      <h2>Teacher Information</h2>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
      <p>Subject: {props.subject}</p>
      <p>Verified: {props.isVerified}</p>
    </div>
  );
};

const AuthStudent = withAuth(Student);
const AuthTeacher = withAuth(Teacher);

const App = () => {
  return (
    <div>
      <AuthStudent name="Alice" age={20} grade="A" />
      <AuthTeacher name="Mr. Smith" age={45} subject="Mathematics" />
    </div>
  );
};

export default App;

In this example:

• withAuth is the higher-order component responsible for handling authentication logic.
• Student and Teacher are regular components that display information about different types of users.
• AuthStudent and AuthTeacher are the wrapped components with authentication functionality added by the withAuth higher-order component.

When you use AuthStudent, or AuthTeacher in your application, they will only render the wrapped component if the user is authenticated. Otherwise, they will display a message prompting the user to log in.

Conclusion: -

In summary, higher-order components (HOCs) in React empower developers to enhance component functionality and promote code reuse effectively. By encapsulating common logic and behaviors, HOCs enable the creation of more modular and scalable applications. They abstract away concerns like authentication and data fetching, fostering a declarative coding style.

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture | Cubed
• More content at PlainEnglish.io