Understanding the Higher-Order Component (HOC) Design Pattern in React

When building complex React applications, code reusability and separation of concerns become crucial. One design pattern that shines in this regard is the Higher-Order Component (HOC). This blog will walk you through the HOC pattern with a real-world example that manages authentication in a React app.

Why Use a Higher-Order Component?

A Higher-Order Component (HOC) is a function that takes a component and returns a new component, adding additional functionality or logic to the original component. HOCs enable the reuse of component logic and are especially helpful for concerns like authentication, data fetching, or logging.

Why Use HOCs

• Separation of Concerns: HOCs encapsulate reusable logic.

• Code Reusability: Reuse common functionality across multiple components.

• Cleaner Components: Keep components focused on their primary responsibilities

Example: Authentication with HOC

Let’s break down a sample implementation where we wrap a component with an HOC to manage authentication.

1. The AuthContainer Component
   This component manages the UI for login and logout actions based on the user's authentication state.

   
    import React from 'react'; 
    import useAuthData from '@/components/auth-provider';
    import LoginButton from '@/components/login-button';
    import LogoutButton from '@/components/logout-button';
    import { UserProfile } from '@/models/user-profile'; 
    import { log } from 'console';
    import withAuth from '@/hoc/with-auth';
   
    export interface AuthContainerProps {
      isAuthenticated: boolean;
      loginWithEmail: (email: string, password: string) => Promise<void>;
      logout: () => void;
    }
    const AuthContainer: React.FC<AuthContainerProps> = ({ isAuthenticated, loginWithEmail, logout }) => {
   
      const handleLogin = async () => {
   
        if (loginWithEmail) {
          console.log('Login clicked');
          await loginWithEmail('user@example.com', 'password');
          const userProfile = UserProfile.Builder
          .setName('user')
          .setEmail('user@example.com')
          .setAge(30)
          .setAddress('123 Main St, Anytown, USA')
          .build();
         console.log(userProfile.toString());
        }
      }; 
      const handleLogout = ()=>logout();
      return (
        <div>
          {isAuthenticated ? (
            <>
            <p>Welcome back, user!</p>
            <LogoutButton onLogout={handleLogout}/>
            </>
          ) : (
            <LoginButton onLogin={handleLogin} />
          )}
        </div>
      );
    };
   
    export default withAuth(AuthContainer);
   

2. The withAuth HOC:

   The HOC wraps the AuthContainer and injects authentication data and methods into it.

    import React from 'react';
    import useAuthData from '@/components/auth-provider';
    import { AuthContainerProps } from '@/container/auth-container';
   
    const withAuth = (WrappedComponent: React.FC<AuthContainerProps>) => {
      return (props: any) => {
        const authData = useAuthData();
        const isAuthenticated = authData?.isAuthenticated;
   
        return (
          <WrappedComponent
            {...props}
            isAuthenticated={isAuthenticated}
            loginWithEmail={authData?.loginWithEmail}
            logout={authData?.logout}
          />
        );
      };
    };
   
    export default withAuth;
   

   The withAuth HOC works by leveraging the useAuthData hook to fetch authentication data, including the user's login status and available methods for logging in and out. It then injects this data as props (isAuthenticated, loginWithEmail, and logout) into the wrapped AuthContainer component. This allows the wrapped component to focus on rendering the appropriate UI based on the user's authentication state, while the HOC handles the logic of managing and passing down authentication-related information.

3. Wrapping the Component:
   Finally, we wrap AuthContainer with the withAuth HOC.

    import withAuth from '@/hoc/with-auth';
    export default withAuth(AuthContainer);
   

Benefits of Using the HOC Design Pattern

• Cleaner Components: By offloading authentication logic to the HOC, AuthContainer focuses solely on rendering the UI.

• Scalability: You can reuse the withAuth HOC across multiple components, keeping the authentication logic consistent.

• Testability: Each component and HOC can be tested independently, making your codebase more maintainable.

Conclusion

Higher-Order Components (HOCs) are a powerful tool in a React developer’s toolkit, enabling code reuse and separation of concerns. In this example, the withAuth HOC simplifies authentication management, allowing the AuthContainer to focus solely on UI rendering.

As your applications grow, consider using HOCs to handle cross-cutting concerns like authentication, logging, and data fetching etc. Happy coding!

Repo : https://github.com/Akashjayan1999/Design-pattern