Higher-Order Components

What is a Higher-Order Component (HOC)?

A Higher-Order Component is a function that takes a component and returns a new component with additional features or logic.

📌 HOCs are used to reuse component logic (e.g., auth protection, theming, data fetching) across multiple components.

📦 Basic Syntax

• WrappedComponent: The original component.
• withExtraLogic: HOC function that returns a new component.

🧪 Example: Basic HOC (Logging Props)

🔧 Usage:

🛡️ Example: Auth Guard using HOC

🔁 1. Create HOC

🧑‍💻 2. Create a Protected Page

🧪 3. Wrap with HOC

✅ 4. Use in App

🔁 Real-World Use Cases

⚠️ Caveats

• HOCs don’t work with Hooks inside the HOC function directly — hooks must obey React rules inside functional components.
• Prop name collisions: be careful when injecting or modifying props.
• Wrapper Hell: nesting many HOCs can complicate debugging.

✅ Best Practices

• Name HOCs with withXyz convention.
• Avoid mutating the original component.
• Preserve static methods using libraries like hoist-non-react-statics.

🔚 Summary