React JS Tutorial: Higher-Order Components (HOC) 🎯

Welcome back to CodeYourCraft! Today, we're going to dive deep into Higher-Order Components (HOC) in React JS. We'll learn what HOC is, why we use it, and how to create one. Let's get started!

Understanding Higher-Order Components (HOC) 📝

Higher-Order Components (HOC) are a powerful technique in React for reusing component logic. A Higher-Order Component (HOC) is a function that takes a component and returns a new component with additional props and/or behaviors.

Why Use Higher-Order Components? 💡

HOCs can help you solve common problems like:

Code reusability: You can share common behavior between components.
Conditional rendering: HOCs can control when to render child components.
Provider pattern: HOCs can help manage global state or third-party libraries.

Creating a Higher-Order Component 💡

Let's create a simple HOC that adds a wrapper around a component and logs a message to the console when the wrapped component is rendered.

jsx

import React from 'react';

// Higher-Order Component
const withLog = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component rendered');
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

// Using the Higher-Order Component
const LoggedComponent = withLog(class MyComponent extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
});

In this example, we created a withLog HOC that takes a component (WrappedComponent) as an argument and returns a new component. The new component includes the logic for logging a message to the console when the component is rendered.

We also created a MyComponent component, which we wrapped with our withLog HOC to create a new component called LoggedComponent. Now, when LoggedComponent is rendered, it will log "Component rendered" to the console.

Real-World Example 💡

Now, let's create a more practical HOC for managing authentication. This HOC will check if a user is logged in before rendering a component.

jsx

import React from 'react';

const Authenticated = (WrappedComponent) => {
  const isLoggedIn = () => {
    // Check for authentication here
    // Return true if logged in, false otherwise
  };

  return (props) =>
    isLoggedIn() ? (
      <WrappedComponent {...props} />
    ) : (
      <div>Please log in to access this page</div>
    );
};

const MyComponent = (props) => {
  return <h1>Welcome, {props.name}</h1>;
};

const AuthenticatedMyComponent = Authenticated(MyComponent);

In this example, we created an Authenticated HOC that checks if a user is logged in before rendering a wrapped component. If the user is logged in, the wrapped component is rendered; otherwise, a message is displayed to prompt the user to log in.

Quiz Time 🎯

Question: What is the purpose of a Higher-Order Component (HOC) in React JS?

A) A HOC is a function that returns a new component with additional props and/or behaviors. B) A HOC is a component that can be used as a child component to render other components. C) A HOC is a technique for managing global state in React JS.

Correct: A) A HOC is a function that returns a new component with additional props and/or behaviors.

Explanation: HOCs allow you to reuse component logic by creating a higher-order function that takes a component and returns a new component with additional functionality.

That's it for today! We hope you enjoyed learning about Higher-Order Components in React JS. Stay tuned for more exciting tutorials on CodeYourCraft! 🚀