Higher-Order Components in Component Composition (Live Playground)

Higher-order components (HOCs) are another powerful technique in React for sharing reusable behavior between components. An HOC is a function that takes a component and returns a new component with additional props or behavior. This approach allows for more flexibility when composing components and can help keep your codebase clean and modular. In this tutorial, we'll demonstrate how to use HOCs in a React application.

Higher-Order Component Example

Let's consider a simple example where we have a MouseTracker component that tracks the mouse position and we want to display the position using two different components, DisplayA and DisplayB.

First, let's create the higher-order component withMouseTracker that adds mouse tracking behavior to any component:

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

function withMouseTracker(WrappedComponent) {
  return function MouseTrackerComponent(props) {
    const [position, setPosition] = useState({ x: 0, y: 0 });

    function handleMouseMove(event) {
      setPosition({ x: event.clientX, y: event.clientY });
    }

    useEffect(() => {
      window.addEventListener('mousemove', handleMouseMove);
      return () => {
        window.removeEventListener('mousemove', handleMouseMove);
      };
    }, []);

    return <WrappedComponent {...props} position={position} />;
  };
}

Now, let's create the DisplayA and DisplayB components to display the mouse position in different ways:

JavaScript
function DisplayA(props) {
  return (
    <div>
      <h1>Display A</h1>
      <p>
        The mouse position is ({props.position.x}, {props.position.y})
      </p>
    </div>
  );
}

function DisplayB(props) {
  return (
    <div>
      <h1>Display B</h1>
      <p>
        X: {props.position.x}, Y: {props.position.y}
      </p>
    </div>
  );
}

Now we can use the withMouseTracker HOC with both DisplayA and DisplayB:

JavaScript
import React from 'react';
import withMouseTracker from './withMouseTracker';
import { DisplayA, DisplayB } from './DisplayComponents';

const DisplayAWithMouseTracker = withMouseTracker(DisplayA);
const DisplayBWithMouseTracker = withMouseTracker(DisplayB);

function App() {
  return (
    <div>
      <DisplayAWithMouseTracker />
      <DisplayBWithMouseTracker />
    </div>
  );
}

export default App;

In this example, the withMouseTracker HOC wraps DisplayA and DisplayB, enhancing them with the mouse tracking behavior. The wrapped components receive the position object as a prop, allowing them to display the mouse position as needed. By using higher-order components, we can easily share the mouse tracking behavior between different components, keeping our code clean and modular.

Live Playground, Try it Yourself

Conclusion

Higher-order components are a powerful technique for sharing reusable behavior between components in React applications. In this tutorial, we demonstrated how to use higher-order components to share mouse tracking behavior between two different display components. As your application grows in complexity, this technique will become even more valuable in keeping your codebase organized and maintainable.

Higher-Order Components in Component Composition (Live Playground)

Higher-Order Component Example​

Conclusion​

Higher-Order Component Example

Conclusion