1. Where does it come from?

Higher Order Components (HOC) are an advanced technique in the React framework for reusing component logic.

• Origin: They originate from the concept of higher-order functions in functional programming. At the early stages of React's development, as component logic became complex, there was a need for a pattern to share this logic.
• Comparison: Before the advent of HOCs, reusing logic in React components was commonly done through mixins. With the introduction of HOCs, logic reuse became clearer and more modular.

2. What is it?

A Higher Order Component is essentially a function that takes a component and returns a new component.

• Method of Solution: HOCs enhance or inject additional props into the original component by wrapping and composing it.
• Three Key Principles:
  1. Do not modify the original component within the HOC, instead, use composition.
  2. Pass through unrelated props.
  3. Maximize composability.

Example:

Background

Suppose there is a text input component that needs data validation and logging functionality.

Application

Create an HOC that adds validation and logging functionality to the original component, then use this HOC to enhance the text input component.

Code Example

    function withLogging(WrappedComponent) {
        return function(props) {
            // Logging logic
            console.log('Logging...');
            // Return the enhanced component
            return <WrappedComponent {...props} />;
        };
    }
            

3. Where is it going?

• Limitations: HOCs can lead to prop name conflicts and potentially increase the complexity of the component tree.
• Direction for Optimization: Use new React features like Hooks to simplify shared logic and reduce dependency on HOCs.
• Future Development: In future versions of React, Hooks and other functional programming techniques might replace some use cases of HOCs.