React Component Architecture

# React Component Architecture

## Table of Contents

- [Overview](#overview)
- [When to Use](#when-to-use)
- [Quick Start](#quick-start)
- [Reference Guides](#reference-guides)
- [Best Practices](#best-practices)

## Overview

Build scalable, maintainable React components using modern patterns including functional components, hooks, composition, and TypeScript for type safety.

## When to Use

- Component library design
- Large-scale React applications
- Reusable UI patterns
- Custom hooks development
- Performance optimization

## Quick Start

Minimal working example:

```typescript
// Button.tsx
import React, { useState, useCallback } from 'react';

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  disabled = false,
  onClick,
  children
}) => {
  const variantStyles = {
    primary: 'bg-blue-500 hover:bg-blue-600',
    secondary: 'bg-gray-500 hover:bg-gray-600',
    danger: 'bg-red-500 hover:bg-red-600'
  };

  const sizeStyles = {
// ... (see reference guides for full implementation)
```

## Reference Guides

Detailed implementations in the `references/` directory:

| Guide | Contents |
|---|---|
| [Functional Component with Hooks](references/functional-component-with-hooks.md) | Functional Component with Hooks |
| [Custom Hooks Pattern](references/custom-hooks-pattern.md) | Custom Hooks Pattern |
| [Composition Pattern](references/composition-pattern.md) | Composition Pattern |
| [Higher-Order Component (HOC)](references/higher-order-component-hoc.md) | Higher-Order Component (HOC) |
| [Render Props Pattern](references/render-props-pattern.md) | Render Props Pattern |

## Best Practices

### ✅ DO

- Follow established patterns and conventions
- Write clean, maintainable code
- Add appropriate documentation
- Test thoroughly before deploying

### ❌ DON'T

- Skip testing or validation
- Ignore error handling
- Hard-code configuration values


# Render Props Pattern

## Render Props Pattern

```typescript
// DataFetcher.tsx
interface DataFetcherProps<T> {
  url: string;
  children: (data: T | null, loading: boolean, error: Error | null) => React.ReactNode;
}

export const DataFetcher = <T,>({ url, children }: DataFetcherProps<T>) => {
  const [data, setData] = React.useState<T | null>(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<Error | null>(null);

  React.useEffect(() => {
    fetch(url)
      .then(r => r.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return <>{children(data, loading, error)}</>;
};

// Usage
<DataFetcher<User[]> url="/api/users">
  {(users, loading, error) => (
    <>{loading ? <p>Loading...</p> : users?.map(u => <p key={u.id}>{u.name}</p>)}</>
  )}
</DataFetcher>
```


// Component: [Name]
// TODO: Customize for your framework (React, Vue, Svelte, etc.)

import React from 'react';

interface Props {
  // TODO: Define props
}

export function ComponentName({ }: Props) {
  // TODO: Add state and effects

  return (
    <div>
      {/* TODO: Add component markup */}
    </div>
  );
}


# Higher-Order Component (HOC)

## Higher-Order Component (HOC)

```typescript
// withLoader.tsx
interface WithLoaderProps {
  isLoading: boolean;
  error?: Error | null;
}

function withLoader<P extends object>(
  Component: React.ComponentType<P>
): React.FC<P & WithLoaderProps> {
  return ({ isLoading, error, ...props }: P & WithLoaderProps) => {
    if (isLoading) return <div>Loading...</div>;
    if (error) return <div className="text-red-500"