HOC (1/9)
What are Higher-Order components?
    A higher-order component is a function that transforms a component into another component with added functionality. HOCs are not part of the React API. They are a design pattern that emerges from React’s compositional nature.
    • It is a technique in React for reusing component logic. They are used for code reuse, cross-cutting concerns like authentication, and adding functionality to components without modifying their original source code.
    • HOC doesn’t modify the input component, nor does it use inheritance to copy its behaviour. Rather, a HOC composes the original component by wrapping it in a container component.
    A HOC is a pure function with zero side effects.
    • Takes a component as an argument
    • Returns a new component
    • Can render the original component
    • Can add extra props to the original component
    Use Cases:
    • Wrapping components with cross-cutting concerns like authentication, logging, or data fetching.
    • Sharing stateful logic or behaviour across multiple components.
    • Encapsulating reusable logic that doesn't require a specific rendering structure.
    Pros:
    • Offers a clean way to reuse logic without repeating it in multiple components.
    • Enhances modularity by separating concerns into individual HOCs.
    • Works well with class-based components.
    • Supports reusing logic and behaviour without altering the original components.
    • Well-suited for sharing behaviour across components.
    Cons:
    • May be less intuitive for developers new to the concept.
    • Prop conflicts can arise when multiple HOCs try to manipulate the same prop.
    • HOC nesting can lead to deep component hierarchies and affect readability.
    • Debugging might become complex when the component structure becomes convoluted.