Higher-Order Components (HOCs) React

What You’ll Learn 📚

• What Higher-Order Components (HOCs) are
• How HOCs differ from regular components
• Why and when to use HOCs
• Step-by-step examples from simple to complex
• Common questions and troubleshooting tips

Introduction to Higher-Order Components

In React, a Higher-Order Component (HOC) is an advanced technique for reusing component logic. HOCs are not part of the React API per se. They are a pattern that emerges from React’s compositional nature.

Think of HOCs like a function that takes a component and returns a new component. It’s like adding extra functionality to your existing components! 💡

Key Terminology

• Component: A building block of React applications, typically a JavaScript function or class.
• Higher-Order Component (HOC): A function that takes a component and returns a new component with added functionality.
• Wrapper Component: The component returned by an HOC that wraps the original component.

Simple Example: A Basic HOC

import React from 'react';

// This is our Higher-Order Component
function withLogging(WrappedComponent) {
  return function(props) {
    console.log('Current props:', props);
    return ;
  };
}

// A simple component to be wrapped
function HelloWorld(props) {
  return 
Hello, {props.name}!
;
}

// Enhancing HelloWorld with logging functionality
const EnhancedHelloWorld = withLogging(HelloWorld);

// Usage
function App() {
  return ;
}

export default App;

Progressively Complex Examples

Example 2: Authorization HOC

import React from 'react';

// HOC for authorization
function withAuthorization(WrappedComponent, userRole) {
  return function(props) {
    if (props.role !== userRole) {
      return 
Access Denied
;
    }
    return ;
  };
}

// Component to be wrapped
function Dashboard(props) {
  return 
Welcome to the Dashboard, {props.name}!
;
}

// Enhanced component with authorization
const AdminDashboard = withAuthorization(Dashboard, 'admin');

// Usage
function App() {
  return ;
}

export default App;

Example 3: Data Fetching HOC

import React, { useState, useEffect } from 'react';

// HOC for data fetching
function withDataFetching(WrappedComponent, dataSource) {
  return function(props) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
      fetch(dataSource)
        .then(response => response.json())
        .then(data => {
          setData(data);
          setLoading(false);
        });
    }, [dataSource]);

    if (loading) return 
Loading...
;
    return ;
  };
}

// Component to be wrapped
function UserList({ data }) {
  return (
    

      {data.map(user => (
        
{user.name}
      ))}
    
  );
}

// Enhanced component with data fetching
const UserListWithData = withDataFetching(UserList, 'https://jsonplaceholder.typicode.com/users');

// Usage
function App() {
  return ;
}

export default App;

Common Questions and Answers

1. What is a Higher-Order Component?
   A function that takes a component and returns a new component with added functionality.
2. When should I use an HOC?
   Use HOCs when you need to share common functionality across multiple components.
3. Can HOCs modify the original component?
   No, HOCs should not modify the original component. They should wrap it and add functionality.
4. Are HOCs the same as render props?
   No, they are different patterns for achieving similar goals. HOCs wrap components, while render props use a function as a child.
5. Can I use hooks inside HOCs?
   Yes, you can use hooks inside the functional component returned by an HOC.

Troubleshooting Common Issues

Ensure your HOCs do not modify the original component directly. Always return a new component.

If you see ‘Too many re-renders’, check your state updates and ensure they are not causing infinite loops.

Practice Exercises

• Create an HOC that adds a timestamp to a component’s props.
• Build an HOC that handles error boundaries for a component.

Remember, practice makes perfect! Keep experimenting with HOCs, and you’ll master them in no time. Happy coding! 😊