⚙️ React Component Patterns

🔳 Slot Pattern

• Purpose: pass child components as props
• Usage: {children} {header}, {footer}.
• Benefit: Flexible composition without dictating structure.

🧱 Compound Pattern

• Idea: Break a feature into multiple related subcomponents.
• Example: <Tabs> with <TabList> and <TabPanel> inside.
• Behavior: Internally linked using React Context or shared props.

🧼 Higher-Order Components (HOC)

• Concept: A function that takes a component and returns a new one.
• Use Cases: Auth guards, error boundaries, conditional rendering.
• Tip: HOCs with global logic wrap the lower-priority ones.

🧩 Render Props

• Pattern: Pass a function prop to delegate rendering to child components

• Advantage: Abstract state/behavior but retain control over UI.

• Example:

  <DataProvider>{data => <Chart data={data} />}</DataProvider>
  

🧠 Hooks as Composition

• Modern approach: Custom hooks encapsulate shared logic.
• Benefits:
  • Encourages reuse over inheritance.
  • Keeps components clean and declarative.