React Patterns

// Controlled Component
function ControlledForm() {
  const [value, setValue] = useState("");
  
  const handleChange = (e) => {
    setValue(e.target.value);
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Controlled value:", value);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={value} 
        onChange={handleChange} 
      />
      <button type="submit">Submit</button>
    </form>
  );
}

// Uncontrolled Component
function UncontrolledForm() {
  const inputRef = useRef(null);
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Uncontrolled value:", inputRef.current.value);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        ref={inputRef} 
        defaultValue="initial" 
      />
      <button type="submit">Submit</button>
    </form>
  );
}

// When to use controlled:
// - Form validation in real-time
// - Dynamic form fields
// - Complex forms with conditional logic
// - When you need to manipulate the value before submission

// When to use uncontrolled:
// - Simple forms
// - File inputs (always uncontrolled)
// - Performance-critical forms with many inputs
// - When integrating with non-React code

function withLoader(WrappedComponent, fetchData) {
  return function WithLoaderComponent(props) {
    const [loading, setLoading] = useState(true);
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);
    
    useEffect(() => {
      const loadData = async () => {
        try {
          setLoading(true);
          const result = await fetchData(props);
          setData(result);
        } catch (err) {
          setError(err.message);
        } finally {
          setLoading(false);
        }
      };
      
      loadData();
    }, [props]);
    
    if (loading) {
      return <div className="spinner">Loading...</div>;
    }
    
    if (error) {
      return <div className="error">Error: {error}</div>;
    }
    
    return <WrappedComponent {...props} data={data} loading={loading} />;
  };
}

// Usage example
function UserProfile({ user, loading }) {
  if (loading) return <div>Loading user...</div>;
  
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

const fetchUserData = async ({ userId }) => {
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
};

const UserProfileWithLoader = withLoader(UserProfile, fetchUserData);

// In parent component
function App() {
  return <UserProfileWithLoader userId={123} />;
}

// Alternative: Render Props version
function Loader({ fetchData, children }) {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchData().then(setData).finally(() => setLoading(false));
  }, [fetchData]);
  
  return children({ loading, data });
}

function useFetch(url, options = {}, dependencies = []) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  // Cache using useRef (could use Context/Redux for global cache)
  const cache = useRef({});
  
  useEffect(() => {
    const abortController = new AbortController();
    
    const fetchData = async () => {
      setLoading(true);
      setError(null);
      
      // Check cache first
      const cacheKey = url + JSON.stringify(options);
      if (cache.current[cacheKey]) {
        setData(cache.current[cacheKey]);
        setLoading(false);
        return;
      }
      
      try {
        const response = await fetch(url, {
          ...options,
          signal: abortController.signal
        });
        
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const result = await response.json();
        
        // Cache the result
        cache.current[cacheKey] = result;
        setData(result);
      } catch (err) {
        if (err.name !== "AbortError") {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    };
    
    fetchData();
    
    // Cleanup function
    return () => {
      abortController.abort();
    };
  }, [url, JSON.stringify(options), ...dependencies]);
  
  return { data, loading, error };
}

// Usage examples
function UserList() {
  const { data: users, loading, error } = useFetch("/api/users");
  
  if (loading) return <div>Loading users...</div>;
  if (error) return <div>Error: {error}</div>;
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// With dependencies
function UserProfile({ userId }) {
  const { data: user } = useFetch(
    `/api/users/${userId}`,
    { method: "GET" },
    [userId] // Refetch when userId changes
  );
}

// Advanced: Return refetch function
// Add to useFetch:
const [trigger, setTrigger] = useState(0);
const refetch = () => setTrigger(t => t + 1);
// Add trigger to dependencies

import { createContext, useContext, useState } from "react";

const TabsContext = createContext();

function Tabs({ children, defaultIndex = 0 }) {
  const [activeIndex, setActiveIndex] = useState(defaultIndex);
  
  const value = {
    activeIndex,
    setActiveIndex
  };
  
  return (
    <TabsContext.Provider value={value}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

function TabList({ children }) {
  const { activeIndex, setActiveIndex } = useContext(TabsContext);
  
  const handleKeyDown = (e) => {
    const tabs = React.Children.toArray(children);
    const currentIndex = activeIndex;
    
    switch (e.key) {
      case "ArrowRight":
        e.preventDefault();
        setActiveIndex((currentIndex + 1) % tabs.length);
        break;
      case "ArrowLeft":
        e.preventDefault();
        setActiveIndex((currentIndex - 1 + tabs.length) % tabs.length);
        break;
      case "Home":
        e.preventDefault();
        setActiveIndex(0);
        break;
      case "End":
        e.preventDefault();
        setActiveIndex(tabs.length - 1);
        break;
    }
  };
  
  return (
    <div 
      role="tablist" 
      className="tab-list"
      onKeyDown={handleKeyDown}
    >
      {children}
    </div>
  );
}

function Tab({ children, index }) {
  const { activeIndex, setActiveIndex } = useContext(TabsContext);
  const isActive = activeIndex === index;
  
  return (
    <button
      role="tab"
      aria-selected={isActive}
      className={`tab ${isActive ? "active" : ""}`}
      onClick={() => setActiveIndex(index)}
      tabIndex={isActive ? 0 : -1}
    >
      {children}
    </button>
  );
}

function TabPanel({ children, index }) {
  const { activeIndex } = useContext(TabsContext);
  const isActive = activeIndex === index;
  
  return (
    <div
      role="tabpanel"
      aria-hidden={!isActive}
      className={`tab-panel ${isActive ? "active" : ""}`}
      tabIndex={0}
    >
      {isActive && children}
    </div>
  );
}

// Usage
function App() {
  return (
    <Tabs defaultIndex={1}>
      <TabList>
        <Tab index={0}>Profile</Tab>
        <Tab index={1}>Messages</Tab>
        <Tab index={2}>Settings</Tab>
      </TabList>
      
      <TabPanel index={0}>
        <h2>Profile Content</h2>
        <p>Edit your profile here</p>
      </TabPanel>
      
      <TabPanel index={1}>
        <h2>Messages</h2>
        <p>Your messages will appear here</p>
      </TabPanel>
      
      <TabPanel index={2}>
        <h2>Settings</h2>
        <p>Configure your settings</p>
      </TabPanel>
    </Tabs>
  );
}

// Alternative: Clone children with props
function TabList({ children }) {
  const { activeIndex, setActiveIndex } = useContext(TabsContext);
  
  return (
    <div role="tablist">
      {React.Children.map(children, (child, index) =>
        React.cloneElement(child, {
          isActive: activeIndex === index,
          onClick: () => setActiveIndex(index),
          index
        })
      )}
    </div>
  );
}

function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  useEffect(() => {
    const handleMouseMove = (e) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };
    
    window.addEventListener("mousemove", handleMouseMove);
    
    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);
  
  return render(position);
}

// Usage example
function App() {
  return (
    <div style={{ height: "100vh" }}>
      <MouseTracker
        render={({ x, y }) => (
          <div>
            <h1>Mouse Position Tracker</h1>
            <p>
              X: {x}, Y: {y}
            </p>
            <div 
              style={{
                position: "absolute",
                left: x,
                top: y,
                width: "20px",
                height: "20px",
                backgroundColor: "red",
                borderRadius: "50%",
                transform: "translate(-50%, -50%)"
              }}
            />
          </div>
        )}
      />
    </div>
  );
}

// Alternative: Children as function (more common)
function MouseTracker({ children }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  useEffect(() => {
    const handleMouseMove = (e) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };
    
    window.addEventListener("mousemove", handleMouseMove);
    
    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);
  
  return children(position);
}

// Usage with children
function App() {
  return (
    <MouseTracker>
      {({ x, y }) => (
        <div>Mouse at: {x}, {y}</div>
      )}
    </MouseTracker>
  );
}

// Multiple render props example
function DataFetcher({ url, render, renderLoading, renderError }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);
  
  if (loading && renderLoading) {
    return renderLoading();
  }
  
  if (error && renderError) {
    return renderError(error);
  }
  
  return render(data);
}

// Problem: All consumers re-render when any context value changes
const ThemeContext = createContext({
  colors: { primary: "#000" },
  spacing: { small: "8px" }
});

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState({
    colors: { primary: "#007bff" },
    spacing: { small: "8px", medium: "16px" },
    mode: "light"
  });
  
  // This causes all consumers to re-render when any part changes
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// Solution 1: Split contexts
const ThemeStateContext = createContext(null);
const ThemeUpdaterContext = createContext(null);

function OptimizedThemeProvider({ children }) {
  const [theme, setTheme] = useState({
    colors: { primary: "#007bff" },
    spacing: { small: "8px" },
    mode: "light"
  });
  
  // Memoize context values
  const themeState = useMemo(() => theme, [theme]);
  const themeUpdater = useMemo(() => setTheme, []);
  
  return (
    <ThemeStateContext.Provider value={themeState}>
      <ThemeUpdaterContext.Provider value={themeUpdater}>
        {children}
      </ThemeUpdaterContext.Provider>
    </ThemeStateContext.Provider>
  );
}

// Consumers only re-render when needed
function ThemeButton() {
  const theme = useContext(ThemeStateContext);
  // Only re-renders when theme changes
  return <button style={{ backgroundColor: theme.colors.primary }}>Click</button>;
}

function ThemeToggle() {
  const setTheme = useContext(ThemeUpdaterContext);
  // Doesn't re-render when theme changes, only needs updater
  return (
    <button onClick={() => setTheme(prev => ({
      ...prev,
      mode: prev.mode === "light" ? "dark" : "light"
    }))}>
      Toggle Theme
    </button>
  );
}

// Solution 2: Use selectors pattern
function useThemeSelector(selector) {
  const theme = useContext(ThemeStateContext);
  return useMemo(() => selector(theme), [theme, selector]);
}

// Component only re-renders when primary color changes
function PrimaryButton() {
  const primaryColor = useThemeSelector(theme => theme.colors.primary);
  return <button style={{ backgroundColor: primaryColor }}>Click</button>;
}

// Solution 3: Zustand/Recoil style atoms
const themeAtoms = {
  colors: atom({ primary: "#007bff" }),
  spacing: atom({ small: "8px" }),
  mode: atom("light")
};

// Components subscribe only to needed atoms

// React.memo: Memoizes component
const ExpensiveComponent = React.memo(function ExpensiveComponent({ items, onSelect }) {
  console.log("ExpensiveComponent rendered");
  
  return (
    <ul>
      {items.map(item => (
        <li key={item.id} onClick={() => onSelect(item.id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
});

// Custom comparison function (rarely needed)
const MemoizedWithCompare = React.memo(ExpensiveComponent, (prevProps, nextProps) => {
  // Return true if props are equal (no re-render needed)
  return prevProps.items.length === nextProps.items.length;
});

// useMemo: Memoizes expensive calculations
function UserList({ users, searchTerm }) {
  const filteredUsers = useMemo(() => {
    console.log("Filtering users...");
    return users.filter(user => 
      user.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [users, searchTerm]); // Recalculate when users or searchTerm changes
  
  return (
    <div>
      <div>Count: {filteredUsers.length}</div>
      <ExpensiveComponent items={filteredUsers} />
    </div>
  );
}

// useCallback: Memoizes function references
function ParentComponent() {
  const [count, setCount] = useState(0);
  const [items, setItems] = useState([]);
  
  // Without useCallback: new function each render
  // const handleSelect = (id) => { console.log(id); };
  
  // With useCallback: stable function reference
  const handleSelect = useCallback((id) => {
    console.log("Selected:", id);
  }, []); // Empty deps: function never changes
  
  // With dependencies
  const handleSelectWithDeps = useCallback((id) => {
    console.log("Selected item", id, "from", items.length, "items");
  }, [items]); // Recreate when items changes
  
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Rerender Parent ({count})
      </button>
      <ExpensiveComponent 
        items={items} 
        onSelect={handleSelect} // Stable reference prevents child re-renders
      />
    </div>
  );
}

// Example where memoization HURTS performance
function SimpleComponent({ text }) {
  // BAD: useMemo for simple concatenation
  // const message = useMemo(() => `Hello ${text}`, [text]);
  
  // GOOD: Direct computation
  const message = `Hello ${text}`;
  
  return <div>{message}</div>;
}

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      hasError: false, 
      error: null,
      errorInfo: null 
    };
  }
  
  static getDerivedStateFromError(error) {
    // Update state so the next render shows the fallback UI
    return { hasError: true, error };
  }
  
  componentDidCatch(error, errorInfo) {
    // Log the error to an error reporting service
    console.error("ErrorBoundary caught an error:", error, errorInfo);
    
    // Example: Send to error reporting service
    if (this.props.onError) {
      this.props.onError(error, errorInfo);
    }
    
    this.setState({ errorInfo });
  }
  
  handleReset = () => {
    this.setState({ 
      hasError: false, 
      error: null, 
      errorInfo: null 
    });
    
    if (this.props.onReset) {
      this.props.onReset();
    }
  };
  
  render() {
    if (this.state.hasError) {
      // Custom fallback UI
      if (this.props.fallback) {
        return this.props.fallback({
          error: this.state.error,
          errorInfo: this.state.errorInfo,
          resetError: this.handleReset
        });
      }
      
      // Default fallback
      return (
        <div className="error-boundary">
          <h2>Something went wrong</h2>
          <details>
            <summary>Error details</summary>
            <pre>{this.state.error?.toString()}</pre>
            <pre>{this.state.errorInfo?.componentStack}</pre>
          </details>
          <button onClick={this.handleReset}>Try again</button>
        </div>
      );
    }
    
    return this.props.children;
  }
}

// Usage examples
function App() {
  return (
    <ErrorBoundary
      onError={(error, errorInfo) => {
        // Send to Sentry/LogRocket
        console.error("App error:", error, errorInfo);
      }}
      fallback={({ error, resetError }) => (
        <div>
          <h1>Custom Error UI</h1>
          <p>{error.message}</p>
          <button onClick={resetError}>Retry</button>
        </div>
      )}
    >
      <BuggyComponent />
    </ErrorBoundary>
  );
}

// Custom hook for functional components
function useErrorHandler(givenError) {
  const [error, setError] = useState(null);
  
  useEffect(() => {
    if (givenError) {
      setError(givenError);
    }
  }, [givenError]);
  
  const handleError = useCallback((error) => {
    setError(error);
    
    // Log to service
    console.error("useErrorHandler caught:", error);
  }, []);
  
  const resetError = useCallback(() => {
    setError(null);
  }, []);
  
  return { error, handleError, resetError };
}

// Hook usage
function ComponentWithErrorHandling() {
  const { error, handleError, resetError } = useErrorHandler();
  
  const doSomethingRisky = useCallback(async () => {
    try {
      await riskyOperation();
    } catch (err) {
      handleError(err);
    }
  }, [handleError]);
  
  if (error) {
    return (
      <div>
        <p>Error: {error.message}</p>
        <button onClick={resetError}>Dismiss</button>
      </div>
    );
  }
  
  return <button onClick={doSomethingRisky}>Do Risky Thing</button>;
}

// Nested error boundaries for granular error handling
function App() {
  return (
    <ErrorBoundary fallback={<GlobalError />}>
      <Header />
      <ErrorBoundary fallback={<SidebarError />}>
        <Sidebar />
      </ErrorBoundary>
      <ErrorBoundary fallback={<ContentError />}>
        <MainContent />
      </ErrorBoundary>
    </ErrorBoundary>
  );
}

// 1. useState/useReducer (Built-in)
function ComponentWithState() {
  const [count, setCount] = useState(0);
  
  // useReducer for complex state logic
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

// 2. Context API
const UserContext = createContext();
function App() {
  const [user, setUser] = useState(null);
  
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <ChildComponent />
    </UserContext.Provider>
  );
}

// 3. Redux Toolkit (Modern Redux)
import { configureStore, createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1
  }
});

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});

// 4. Zustand
import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  reset: () => set({ count: 0 })
}));

function Component() {
  const { count, increment } = useStore();
  return <button onClick={increment}>{count}</button>;
}

// 5. Recoil
import { atom, selector, useRecoilState } from "recoil";

const countState = atom({
  key: "countState",
  default: 0
});

const doubledCount = selector({
  key: "doubledCount",
  get: ({ get }) => get(countState) * 2
});

function Component() {
  const [count, setCount] = useRecoilState(countState);
  const double = useRecoilValue(doubledCount);
  return <div>{count} * 2 = {double}</div>;
}

// 6. MobX
import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";

class CounterStore {
  count = 0;
  
  constructor() {
    makeAutoObservable(this);
  }
  
  increment() {
    this.count++;
  }
}

const store = new CounterStore();

const Counter = observer(() => (
  <button onClick={() => store.increment()}>
    {store.count}
  </button>
));

// Server Component (app/page.js in Next.js 13+)
// This runs on the server, can directly access databases
import { db } from "@/lib/db";
import ClientComponent from "@/components/ClientComponent";

async function ServerComponent() {
  // Direct database access - no API route needed
  const products = await db.products.findMany({
    take: 10,
    orderBy: { createdAt: "desc" }
  });
  
  // No useState, useEffect, or event handlers here
  return (
    <div>
      <h1>Product List (Server Rendered)</h1>
      
      {/* Server component rendering */}
      <ul>
        {products.map(product => (
          <li key={product.id}>
            <h2>{product.name}</h2>
            <p>{product.description}</p>
            <span>${product.price}</span>
          </li>
        ))}
      </ul>
      
      {/* Client component for interactivity */}
      <ClientComponent initialProducts={products} />
    </div>
  );
}

// Client Component (components/ClientComponent.jsx)
"use client"; // Required directive

import { useState } from "react";

export default function ClientComponent({ initialProducts }) {
  const [products, setProducts] = useState(initialProducts);
  const [search, setSearch] = useState("");
  
  const filteredProducts = products.filter(p =>
    p.name.toLowerCase().includes(search.toLowerCase())
  );
  
  const addToCart = async (productId) => {
    // Client-side interaction
    await fetch("/api/cart", {
      method: "POST",
      body: JSON.stringify({ productId })
    });
    alert("Added to cart!");
  };
  
  return (
    <div>
      <h2>Interactive Product Search</h2>
      
      <input
        type="text"
        placeholder="Search products..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      
      <ul>
        {filteredProducts.map(product => (
          <li key={product.id}>
            <h3>{product.name}</h3>
            <button onClick={() => addToCart(product.id)}>
              Add to Cart
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

// Layout Component (app/layout.js)
// This is also a Server Component by default
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <nav>
            {/* Navigation can be server component */}
            <a href="/">Home</a>
            <a href="/products">Products</a>
          </nav>
        </header>
        <main>{children}</main>
        <footer>
          {/* Server component fetching current year */}
          <p>© {new Date().getFullYear()} My Store</p>
        </footer>
      </body>
    </html>
  );
}

// Example of nested server/client components
// app/product/[id]/page.js
import ProductDetails from "@/components/ProductDetails";
import ProductReviews from "@/components/ProductReviews";
import AddToCartButton from "@/components/AddToCartButton";

async function ProductPage({ params }) {
  const product = await db.products.findUnique({
    where: { id: params.id },
    include: { reviews: true }
  });
  
  return (
    <div>
      {/* Server component fetching data */}
      <ProductDetails product={product} />
      
      {/* Client component for reviews with interactivity */}
      <ProductReviews reviews={product.reviews} />
      
      {/* Client component for cart actions */}
      <AddToCartButton productId={product.id} />
    </div>
  );
}

// 1. Create a cache for promises
const cache = new Map();

function fetchData(key, promiseFn) {
  if (!cache.has(key)) {
    cache.set(key, promiseFn());
  }
  return cache.get(key);
}

// 2. Create wrapper that throws promise
function useSuspenseFetch(key, promiseFn) {
  const data = fetchData(key, promiseFn);
  
  // Check if data is a promise (still loading)
  if (data && typeof data.then === "function") {
    throw data; // Suspense will catch this
  }
  
  // Check if data is an error
  if (data instanceof Error) {
    throw data; // Error boundary will catch this
  }
  
  return data;
}

// 3. User profile component using suspense
function UserProfile({ userId }) {
  const user = useSuspenseFetch(
    `user-${userId}`,
    () => fetch(`/api/users/${userId}`).then(res => res.json())
  );
  
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

// 4. App with Suspense boundaries
function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Loading user...</div>}>
        <UserProfile userId={123} />
        <Suspense fallback={<div>Loading posts...</div>}>
          <UserPosts userId={123} />
        </Suspense>
      </Suspense>
    </ErrorBoundary>
  );
}

// 5. Alternative: React.lazy for code splitting
const LazyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <Suspense fallback={<div>Loading component...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

// 6. Concurrent features: useTransition
function SearchBox() {
  const [query, setQuery] = useState("");
  const [deferredQuery, setDeferredQuery] = useState("");
  const [isPending, startTransition] = useTransition();
  
  const handleChange = (e) => {
    const value = e.target.value;
    setQuery(value); // Immediate update
    
    startTransition(() => {
      setDeferredQuery(value); // Non-urgent update
    });
  };
  
  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <span>Updating...</span>}
      <SearchResults query={deferredQuery} />
    </div>
  );
}

// 7. useDeferredValue for deferred updates
function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query);
  
  return (
    <div>
      <p>Showing results for: {deferredQuery}</p>
      {/* Expensive computation uses deferred value */}
    </div>
  );
}

// 1. Create portal component
import { useEffect } from "react";
import { createPortal } from "react-dom";

function Portal({ children, containerId = "portal-root" }) {
  const [container, setContainer] = useState(null);
  
  useEffect(() => {
    // Find or create container
    let portalContainer = document.getElementById(containerId);
    
    if (!portalContainer) {
      portalContainer = document.createElement("div");
      portalContainer.id = containerId;
      document.body.appendChild(portalContainer);
    }
    
    setContainer(portalContainer);
    
    return () => {
      // Don't remove container to avoid recreating
      // portalContainer.remove();
    };
  }, [containerId]);
  
  if (!container) return null;
  
  return createPortal(children, container);
}

// 2. Modal component using portal
function Modal({ isOpen, onClose, title, children }) {
  const modalRef = useRef();
  
  // Handle Escape key
  useEffect(() => {
    const handleEscape = (e) => {
      if (e.key === "Escape") {
        onClose();
      }
    };
    
    if (isOpen) {
      document.addEventListener("keydown", handleEscape);
      // Prevent body scroll
      document.body.style.overflow = "hidden";
      
      // Focus trap
      const focusableElements = modalRef.current?.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      
      if (focusableElements?.length > 0) {
        focusableElements[0].focus();
      }
    }
    
    return () => {
      document.removeEventListener("keydown", handleEscape);
      document.body.style.overflow = "auto";
    };
  }, [isOpen, onClose]);
  
  // Handle click outside
  const handleBackdropClick = (e) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };
  
  if (!isOpen) return null;
  
  return (
    <Portal>
      <div 
        className="modal-backdrop"
        onClick={handleBackdropClick}
        role="presentation"
      >
        <div 
          ref={modalRef}
          className="modal"
          role="dialog"
          aria-modal="true"
          aria-labelledby="modal-title"
        >
          <div className="modal-header">
            <h2 id="modal-title">{title}</h2>
            <button 
              onClick={onClose}
              aria-label="Close modal"
              className="close-button"
            >
              ×
            </button>
          </div>
          <div className="modal-content">
            {children}
          </div>
        </div>
      </div>
    </Portal>
  );
}

// 3. Usage
function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  
  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>
        Open Modal
      </button>
      
      <Modal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        title="Example Modal"
      >
        <p>Modal content goes here.</p>
        <button onClick={() => alert("Action!")}>
          Action Button
        </button>
      </Modal>
    </div>
  );
}

// 4. Tooltip using portal
function Tooltip({ children, content }) {
  const [isVisible, setIsVisible] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const triggerRef = useRef();
  
  const showTooltip = () => {
    const rect = triggerRef.current.getBoundingClientRect();
    setPosition({
      x: rect.left + rect.width / 2,
      y: rect.top
    });
    setIsVisible(true);
  };
  
  return (
    <>
      <span
        ref={triggerRef}
        onMouseEnter={showTooltip}
        onMouseLeave={() => setIsVisible(false)}
        onFocus={showTooltip}
        onBlur={() => setIsVisible(false)}
        aria-describedby="tooltip-content"
      >
        {children}
      </span>
      
      {isVisible && (
        <Portal>
          <div
            className="tooltip"
            style={{
              position: "fixed",
              left: position.x,
              top: position.y,
              transform: "translate(-50%, -100%)"
            }}
            role="tooltip"
            id="tooltip-content"
          >
            {content}
          </div>
        </Portal>
      )}
    </>
  );
}

// 1. Basic forwardRef implementation
import { forwardRef, useImperativeHandle, useRef } from "react";

const TextInput = forwardRef(function TextInput(props, ref) {
  const inputRef = useRef();
  
  // Expose methods to parent via ref
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    blur: () => {
      inputRef.current.blur();
    },
    getValue: () => {
      return inputRef.current.value;
    },
    setValue: (value) => {
      inputRef.current.value = value;
    },
    // Expose the DOM element
    element: inputRef.current
  }));
  
  return (
    <input
      ref={inputRef}
      {...props}
      className={`text-input ${props.className || ""}`}
    />
  );
});

// 2. Usage
function Form() {
  const inputRef = useRef();
  
  const handleFocus = () => {
    inputRef.current?.focus();
  };
  
  const handleGetValue = () => {
    console.log(inputRef.current?.getValue());
  };
  
  return (
    <div>
      <TextInput
        ref={inputRef}
        placeholder="Enter text"
        onChange={(e) => console.log(e.target.value)}
      />
      <button onClick={handleFocus}>Focus Input</button>
      <button onClick={handleGetValue}>Get Value</button>
    </div>
  );
}

// 3. With TypeScript
type TextInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
  error?: boolean;
  variant?: "outlined" | "filled";
};

type TextInputHandle = {
  focus: () => void;
  blur: () => void;
  getValue: () => string;
  setValue: (value: string) => void;
  element: HTMLInputElement | null;
};

const TextInput = forwardRef<TextInputHandle, TextInputProps>(
  function TextInput(props, ref) {
    const inputRef = useRef<HTMLInputElement>(null);
    
    useImperativeHandle(ref, () => ({
      focus: () => inputRef.current?.focus(),
      blur: () => inputRef.current?.blur(),
      getValue: () => inputRef.current?.value || "",
      setValue: (value: string) => {
        if (inputRef.current) {
          inputRef.current.value = value;
        }
      },
      element: inputRef.current
    }));
    
    const className = `text-input ${props.variant || "outlined"} ${
      props.error ? "error" : ""
    } ${props.className || ""}`;
    
    return (
      <input
        ref={inputRef}
        {...props}
        className={className}
      />
    );
  }
);

// 4. Higher Order Component with forwardRef
function withLogging(WrappedComponent) {
  return forwardRef(function WithLogging(props, ref) {
    const componentRef = useRef();
    
    // Merge refs
    const setRef = useCallback((node) => {
      componentRef.current = node;
      
      // Handle ref prop
      if (typeof ref === "function") {
        ref(node);
      } else if (ref) {
        ref.current = node;
      }
    }, [ref]);
    
    useEffect(() => {
      console.log("Component mounted:", componentRef.current);
      return () => {
        console.log("Component unmounted");
      };
    }, []);
    
    return (
      <WrappedComponent
        {...props}
        ref={setRef}
      />
    );
  });
}

const TextInputWithLogging = withLogging(TextInput);

// 5. Form integration example
function FormWithRef() {
  const formRef = useRef();
  
  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Access all inputs via ref
    const inputs = formRef.current.querySelectorAll("input");
    const values = Array.from(inputs).map(input => input.value);
    console.log(values);
  };
  
  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <TextInput name="username" required />
      <TextInput name="email" type="email" />
      <button type="submit">Submit</button>
    </form>
  );
}

// 1. Basic React.lazy usage
import { lazy, Suspense } from "react";

const HeavyComponent = lazy(() => import("./HeavyComponent"));
const AnotherComponent = lazy(() => import("./AnotherComponent"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

// 2. Route-based splitting
import { BrowserRouter, Routes, Route } from "react-router-dom";

const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));
const Contact = lazy(() => import("./pages/Contact"));

function RouterApp() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading page...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

// 3. Named exports with lazy
const UserProfile = lazy(() =>
  import("./UserProfile").then(module => ({
    default: module.UserProfile
  }))
);

// 4. Preloading strategy
function usePreload(moduleImport) {
  return useCallback(() => {
    moduleImport();
  }, [moduleImport]);
}

function Navigation() {
  const preloadAbout = usePreload(() => import("./pages/About"));
  
  return (
    <nav>
      <Link 
        to="/about"
        onMouseEnter={preloadAbout}
        onFocus={preloadAbout}
      >
        About
      </Link>
    </nav>
  );
}

// 5. Bundle analysis with webpack magic comments
const Analytics = lazy(() =>
  import(
    /* webpackChunkName: "analytics" */
    /* webpackPrefetch: true */
    /* webpackPreload: true */
    "./Analytics"
  )
);

// 6. Error boundary for lazy loading
class LazyLoadingErrorBoundary extends React.Component {
  state = { hasError: false, error: null };
  
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
  
  retry = () => {
    this.setState({ hasError: false, error: null });
    // Force remount of lazy component
    this.forceUpdate();
  };
  
  render() {
    if (this.state.hasError) {
      return (
        <div>
          <p>Failed to load component</p>
          <button onClick={this.retry}>Retry</button>
        </div>
      );
    }
    
    return this.props.children;
  }
}

// 7. Dynamic import with conditions
function DynamicComponent({ componentName }) {
  const Component = lazy(() => {
    if (componentName === "Chart") {
      return import("./ChartComponent");
    } else if (componentName === "Table") {
      return import("./TableComponent");
    }
    return import("./DefaultComponent");
  });
  
  return (
    <Suspense fallback={<div>Loading {componentName}...</div>}>
      <Component />
    </Suspense>
  );
}

// 8. Bundle analysis tool
function BundleAnalyzer() {
  useEffect(() => {
    if (process.env.NODE_ENV === "development") {
      import("webpack-bundle-analyzer").then(({ BundleAnalyzerPlugin }) => {
        // Configure analyzer
      });
    }
  }, []);
  
  return null;
}

// 1. Presentational Component (Dumb/Stateless)
function UserListPresentation({ users, isLoading, error, onUserClick }) {
  if (error) {
    return <div className="error">Error: {error.message}</div>;
  }
  
  if (isLoading) {
    return <div className="loading">Loading users...</div>;
  }
  
  return (
    <ul className="user-list">
      {users.map(user => (
        <li 
          key={user.id}
          className="user-item"
          onClick={() => onUserClick(user.id)}
        >
          <img src={user.avatar} alt={user.name} />
          <div>
            <h3>{user.name}</h3>
            <p>{user.email}</p>
          </div>
        </li>
      ))}
    </ul>
  );
}

// 2. Container Component (Smart/Stateful)
function UserListContainer() {
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await fetch("/api/users");
        const data = await response.json();
        setUsers(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    };
    
    fetchUsers();
  }, []);
  
  const handleUserClick = useCallback((userId) => {
    console.log("User clicked:", userId);
    // Navigate or show details
  }, []);
  
  return (
    <UserListPresentation
      users={users}
      isLoading={isLoading}
      error={error}
      onUserClick={handleUserClick}
    />
  );
}

// 3. Hooks-based Container (Modern approach)
function useUsers() {
  const [state, setState] = useState({
    users: [],
    isLoading: true,
    error: null
  });
  
  useEffect(() => {
    fetchUsers();
  }, []);
  
  const fetchUsers = async () => {
    try {
      const response = await fetch("/api/users");
      const users = await response.json();
      setState({ users, isLoading: false, error: null });
    } catch (error) {
      setState({ users: [], isLoading: false, error });
    }
  };
  
  const updateUser = useCallback((userId, updates) => {
    setState(prev => ({
      ...prev,
      users: prev.users.map(user =>
        user.id === userId ? { ...user, ...updates } : user
      )
    }));
  }, []);
  
  return {
    ...state,
    fetchUsers,
    updateUser
  };
}

// Container using custom hook
function UserListContainerWithHook() {
  const { users, isLoading, error, updateUser } = useUsers();
  
  return (
    <UserListPresentation
      users={users}
      isLoading={isLoading}
      error={error}
      onUserClick={(userId) => {
        updateUser(userId, { selected: true });
      }}
    />
  );
}

// 4. Higher Order Component Container
function withUsers(WrappedComponent) {
  return function WithUsers(props) {
    const usersData = useUsers();
    
    return (
      <WrappedComponent
        {...props}
        {...usersData}
      />
    );
  };
}

// Enhanced component
const UserListWithUsers = withUsers(UserListPresentation);

// 5. Render Props Container
function UsersContainer({ children }) {
  const usersData = useUsers();
  
  return children(usersData);
}

// Usage
function App() {
  return (
    <UsersContainer>
      {({ users, isLoading, error }) => (
        <UserListPresentation
          users={users}
          isLoading={isLoading}
          error={error}
        />
      )}
    </UsersContainer>
  );
}

// 6. Testing presentational component
// Easy to test with mock props
test("UserListPresentation renders users", () => {
  const mockUsers = [
    { id: 1, name: "John", email: "john@example.com", avatar: "" }
  ];
  
  render(
    <UserListPresentation
      users={mockUsers}
      isLoading={false}
      error={null}
      onUserClick={jest.fn()}
    />
  );
  
  expect(screen.getByText("John")).toBeInTheDocument();
});

// 1. Service interface
class ApiService {
  async getUsers() {
    throw new Error("Not implemented");
  }
  
  async createUser(userData) {
    throw new Error("Not implemented");
  }
}

// 2. Real implementation
class RealApiService extends ApiService {
  async getUsers() {
    const response = await fetch("/api/users");
    return response.json();
  }
  
  async createUser(userData) {
    const response = await fetch("/api/users", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(userData)
    });
    return response.json();
  }
}

// 3. Mock implementation for testing
class MockApiService extends ApiService {
  constructor() {
    super();
    this.users = [
      { id: 1, name: "Test User", email: "test@example.com" }
    ];
  }
  
  async getUsers() {
    return this.users;
  }
  
  async createUser(userData) {
    const newUser = { id: Date.now(), ...userData };
    this.users.push(newUser);
    return newUser;
  }
}

// 4. Context for dependency injection
const ApiServiceContext = createContext(new RealApiService());

function ApiServiceProvider({ children, service }) {
  return (
    <ApiServiceContext.Provider value={service}>
      {children}
    </ApiServiceContext.Provider>
  );
}

// 5. Hook to use service
function useApiService() {
  return useContext(ApiServiceContext);
}

// 6. Component using injected service
function UserList() {
  const [users, setUsers] = useState([]);
  const apiService = useApiService();
  
  useEffect(() => {
    apiService.getUsers().then(setUsers);
  }, [apiService]);
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// 7. App with real service
function App() {
  return (
    <ApiServiceProvider service={new RealApiService()}>
      <UserList />
    </ApiServiceProvider>
  );
}

// 8. Testing with mock service
describe("UserList", () => {
  it("renders users from mock service", async () => {
    const mockService = new MockApiService();
    
    render(
      <ApiServiceProvider service={mockService}>
        <UserList />
      </ApiServiceProvider>
    );
    
    // Wait for users to load
    await screen.findByText("Test User");
    
    expect(screen.getByText("Test User")).toBeInTheDocument();
  });
});

// 9. Factory pattern for service creation
function createApiService(config) {
  if (config.useMock) {
    return new MockApiService();
  }
  
  if (config.env === "test") {
    return new MockApiService();
  }
  
  return new RealApiService();
}

// 10. Parameter injection alternative
function UserList({ apiService = new RealApiService() }) {
  const [users, setUsers] = useState([]);
  
  useEffect(() => {
    apiService.getUsers().then(setUsers);
  }, [apiService]);
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// 11. Higher Order Component injection
function withApiService(WrappedComponent) {
  return function WithApiService(props) {
    const apiService = useApiService();
    
    return (
      <WrappedComponent
        {...props}
        apiService={apiService}
      />
    );
  };
}

const UserListWithService = withApiService(UserList);

// 1. Component registry
const componentRegistry = {};

function registerComponent(type, component) {
  componentRegistry[type] = component;
}

function getComponent(type) {
  const component = componentRegistry[type];
  
  if (!component) {
    throw new Error(`Component type "${type}" not registered`);
  }
  
  return component;
}

// 2. Component factory
function ComponentFactory({ type, props, children }) {
  const Component = getComponent(type);
  
  return (
    <Component {...props}>
      {children}
    </Component>
  );
}

// 3. Example components
const Button = ({ label, onClick, variant = "primary" }) => (
  <button 
    className={`btn btn-${variant}`}
    onClick={onClick}
  >
    {label}
  </button>
);

const Input = ({ label, value, onChange, type = "text" }) => (
  <div className="form-group">
    <label>{label}</label>
    <input
      type={type}
      value={value}
      onChange={onChange}
      className="form-control"
    />
  </div>
);

const Card = ({ title, children }) => (
  <div className="card">
    {title && <div className="card-header">{title}</div>}
    <div className="card-body">{children}</div>
  </div>
);

// 4. Register components
registerComponent("button", Button);
registerComponent("input", Input);
registerComponent("card", Card);

// 5. Dynamic form from configuration
const formConfig = [
  { type: "card", props: { title: "User Registration" },
    children: [
      { 
        type: "input", 
        props: { 
          label: "Name",
          name: "name",
          required: true 
        } 
      },
      { 
        type: "input", 
        props: { 
          label: "Email",
          name: "email",
          type: "email"
        } 
      },
      { 
        type: "button", 
        props: { 
          label: "Submit",
          variant: "primary",
          onClick: () => console.log("Submitted")
        } 
      }
    ]
  }
];

function DynamicForm({ config }) {
  const renderComponent = (item, index) => {
    const { type, props, children } = item;
    
    return (
      <ComponentFactory
        key={index}
        type={type}
        props={props}
      >
        {children && children.map(renderComponent)}
      </ComponentFactory>
    );
  };
  
  return config.map(renderComponent);
}

// 6. TypeScript support
type ComponentType = "button" | "input" | "card" | string;

interface ComponentConfig {
  type: ComponentType;
  props: Record<string, any>;
  children?: ComponentConfig[];
}

interface ComponentFactoryProps {
  type: ComponentType;
  props: Record<string, any>;
  children?: React.ReactNode;
}

// 7. Plugin system
function registerPlugin(plugin) {
  plugin.components.forEach(({ type, component }) => {
    registerComponent(type, component);
  });
}

const chartPlugin = {
  components: [
    { type: "lineChart", component: LineChart },
    { type: "barChart", component: BarChart }
  ]
};

registerPlugin(chartPlugin);

// 8. Dynamic component loader
async function loadComponent(type) {
  // Dynamic import based on type
  switch (type) {
    case "richTextEditor":
      return import("./RichTextEditor").then(m => m.default);
    case "dataGrid":
      return import("./DataGrid").then(m => m.default);
    default:
      return getComponent(type);
  }
}

function AsyncComponentFactory({ type, props }) {
  const [Component, setComponent] = useState(null);
  
  useEffect(() => {
    loadComponent(type).then(setComponent);
  }, [type]);
  
  if (!Component) {
    return <div>Loading {type}...</div>;
  }
  
  return <Component {...props} />;
}

// 9. Usage
function App() {
  return (
    <div>
      <DynamicForm config={formConfig} />
      
      {/* Direct factory usage */}
      <ComponentFactory
        type="card"
        props={{ title: "Manual Card" }}
      >
        <p>This content is manually passed.</p>
        <ComponentFactory
          type="button"
          props={{ label: "Click me", onClick: () => alert("Clicked") }}
        />
      </ComponentFactory>
    </div>
  );
}

// 1. Theme Context
const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  
  const toggleTheme = useCallback(() => {
    setTheme(prev => prev === "light" ? "dark" : "light");
  }, []);
  
  const value = useMemo(() => ({
    theme,
    toggleTheme,
    isDark: theme === "dark"
  }), [theme, toggleTheme]);
  
  return (
    <ThemeContext.Provider value={value}>
      <div className={`theme-${theme}`}>
        {children}
      </div>
    </ThemeContext.Provider>
  );
}

function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme must be used within ThemeProvider");
  }
  return context;
}

// 2. Auth Context
const AuthContext = createContext();

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    // Check stored auth
    const storedUser = localStorage.getItem("user");
    if (storedUser) {
      setUser(JSON.parse(storedUser));
    }
    setLoading(false);
  }, []);
  
  const login = useCallback(async (credentials) => {
    // API call
    const response = await fetch("/api/login", {
      method: "POST",
      body: JSON.stringify(credentials)
    });
    
    const userData = await response.json();
    setUser(userData);
    localStorage.setItem("user", JSON.stringify(userData));
  }, []);
  
  const logout = useCallback(() => {
    setUser(null);
    localStorage.removeItem("user");
  }, []);
  
  const value = useMemo(() => ({
    user,
    loading,
    login,
    logout,
    isAuthenticated: !!user
  }), [user, loading, login, logout]);
  
  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error("useAuth must be used within AuthProvider");
  }
  return context;
}

// 3. Notification Context
const NotificationContext = createContext();

function NotificationProvider({ children }) {
  const [notifications, setNotifications] = useState([]);
  
  const addNotification = useCallback((notification) => {
    const id = Date.now();
    const newNotification = { id, ...notification };
    
    setNotifications(prev => [...prev, newNotification]);
    
    // Auto remove after 5 seconds
    setTimeout(() => {
      removeNotification(id);
    }, 5000);
  }, []);
  
  const removeNotification = useCallback((id) => {
    setNotifications(prev => prev.filter(n => n.id !== id));
  }, []);
  
  const value = useMemo(() => ({
    notifications,
    addNotification,
    removeNotification,
    success: (message) => addNotification({ type: "success", message }),
    error: (message) => addNotification({ type: "error", message }),
    info: (message) => addNotification({ type: "info", message })
  }), [notifications, addNotification, removeNotification]);
  
  return (
    <NotificationContext.Provider value={value}>
      {children}
      <NotificationList />
    </NotificationContext.Provider>
  );
}

function NotificationList() {
  const { notifications, removeNotification } = useNotification();
  
  return (
    <div className="notifications">
      {notifications.map(notification => (
        <div 
          key={notification.id}
          className={`notification notification-${notification.type}`}
        >
          {notification.message}
          <button onClick={() => removeNotification(notification.id)}>
            ×
          </button>
        </div>
      ))}
    </div>
  );
}

function useNotification() {
  const context = useContext(NotificationContext);
  if (!context) {
    throw new Error("useNotification must be used within NotificationProvider");
  }
  return context;
}

// 4. Combined Provider
function AppProvider({ children }) {
  return (
    <ThemeProvider>
      <AuthProvider>
        <NotificationProvider>
          {children}
        </NotificationProvider>
      </AuthProvider>
    </ThemeProvider>
  );
}

// 5. Usage in components
function UserProfile() {
  const { user, logout } = useAuth();
  const { theme, toggleTheme } = useTheme();
  const { success } = useNotification();
  
  const handleLogout = () => {
    logout();
    success("Logged out successfully");
  };
  
  return (
    <div className="profile">
      <h2>Welcome, {user.name}</h2>
      <button onClick={handleLogout}>Logout</button>
      <button onClick={toggleTheme}>
        Switch to {theme === "light" ? "Dark" : "Light"} Mode
      </button>
    </div>
  );
}

// 6. App setup
function App() {
  return (
    <AppProvider>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<UserProfile />} />
        </Routes>
      </Router>
    </AppProvider>
  );
}

// 7. TypeScript version
type Theme = "light" | "dark";

interface ThemeContextValue {
  theme: Theme;
  toggleTheme: () => void;
  isDark: boolean;
}

const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);

// 8. Performance optimized provider
function OptimizedProvider({ children }) {
  // Split contexts to avoid unnecessary re-renders
  return (
    <ThemeProvider>
      <AuthStateProvider>
        <AuthActionsProvider>
          <NotificationProvider>
            {children}
          </NotificationProvider>
        </AuthActionsProvider>
      </AuthStateProvider>
    </ThemeProvider>
  );
}

// 1. useLocalStorage hook
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });
  
  const setValue = useCallback((value) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  }, [key, storedValue]);
  
  const removeValue = useCallback(() => {
    try {
      setStoredValue(initialValue);
      window.localStorage.removeItem(key);
    } catch (error) {
      console.error(error);
    }
  }, [key, initialValue]);
  
  return [storedValue, setValue, removeValue];
}

// 2. useFetch hook (simplified)
function useFetch(url, options = {}) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    const controller = new AbortController();
    
    const fetchData = async () => {
      try {
        const response = await fetch(url, {
          ...options,
          signal: controller.signal
        });
        
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const result = await response.json();
        setData(result);
      } catch (err) {
        if (err.name !== "AbortError") {
          setError(err);
        }
      } finally {
        setLoading(false);
      }
    };
    
    fetchData();
    
    return () => controller.abort();
  }, [url, JSON.stringify(options)]);
  
  return { data, loading, error };
}

// 3. useDebounce hook
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    
    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);
  
  return debouncedValue;
}

// 4. Composed hook: useLocalStorageFetch
function useLocalStorageFetch(key, url) {
  // Get cached data from localStorage
  const [cachedData, setCachedData, removeCachedData] = useLocalStorage(key, null);
  
  // Fetch fresh data
  const { data: freshData, loading, error } = useFetch(url);
  
  // Update cache when fresh data arrives
  useEffect(() => {
    if (freshData) {
      setCachedData(freshData);
    }
  }, [freshData, setCachedData]);
  
  // Determine which data to show
  const data = freshData || cachedData;
  
  // Clear cache
  const clearCache = useCallback(() => {
    removeCachedData();
  }, [removeCachedData]);
  
  return {
    data,
    loading,
    error,
    clearCache,
    isCached: !!cachedData && !freshData
  };
}

// 5. Composed hook: useDebouncedSearch
function useDebouncedSearch(initialQuery = "", delay = 300) {
  const [query, setQuery] = useState(initialQuery);
  const debouncedQuery = useDebounce(query, delay);
  
  const { data: results, loading, error } = useFetch(
    debouncedQuery ? `/api/search?q=${debouncedQuery}` : null
  );
  
  return {
    query,
    setQuery,
    debouncedQuery,
    results,
    loading,
    error
  };
}

// 6. Composed hook: useForm with validation and localStorage
function useForm(initialState, options = {}) {
  const { validate, persistKey } = options;
  
  // Get persisted form data or use initial
  const [persistedData, setPersistedData, clearPersistedData] = useLocalStorage(
    persistKey,
    initialState
  );
  
  const [formData, setFormData] = useState(persistedData);
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});
  
  // Update localStorage on change
  useEffect(() => {
    if (persistKey) {
      setPersistedData(formData);
    }
  }, [formData, persistKey, setPersistedData]);
  
  const handleChange = useCallback((field, value) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
    
    // Clear error when user starts typing
    setErrors(prev => ({
      ...prev,
      [field]: undefined
    }));
  }, []);
  
  const handleBlur = useCallback((field) => {
    setTouched(prev => ({
      ...prev,
      [field]: true
    }));
    
    // Validate on blur
    if (validate) {
      const fieldErrors = validate(field, formData[field], formData);
      if (fieldErrors) {
        setErrors(prev => ({
          ...prev,
          [field]: fieldErrors
        }));
      }
    }
  }, [validate, formData]);
  
  const resetForm = useCallback(() => {
    setFormData(initialState);
    setErrors({});
    setTouched({});
    if (persistKey) {
      clearPersistedData();
    }
  }, [initialState, persistKey, clearPersistedData]);
  
  return {
    formData,
    handleChange,
    handleBlur,
    errors,
    touched,
    resetForm,
    setFormData
  };
}

// 7. Usage example
function SearchComponent() {
  const {
    query,
    setQuery,
    results,
    loading,
    error
  } = useDebouncedSearch();
  
  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      
      {loading && <div>Loading...</div>}
      {error && <div>Error: {error.message}</div>}
      
      <ul>
        {results?.map(result => (
          <li key={result.id}>{result.name}</li>
        ))}
      </ul>
    </div>
  );
}

// 8. TypeScript generic hooks
type UseLocalStorageReturn<T> = [T, (value: T | ((val: T) => T)) => void, () => void];

function useLocalStorage<T>(key: string, initialValue: T): UseLocalStorageReturn<T> {
  // Implementation with types
}

import { createMachine, assign } from "xstate";
import { useMachine } from "@xstate/react";

// 1. Define the machine
const fetchMachine = createMachine({
  id: "fetch",
  initial: "idle",
  context: {
    data: null,
    error: null
  },
  states: {
    idle: {
      on: {
        FETCH: "loading"
      }
    },
    loading: {
      invoke: {
        src: "fetchData",
        onDone: {
          target: "success",
          actions: assign({
            data: (_, event) => event.data
          })
        },
        onError: {
          target: "error",
          actions: assign({
            error: (_, event) => event.data
          })
        }
      },
      on: {
        CANCEL: "idle"
      }
    },
    success: {
      on: {
        REFETCH: "loading",
        RESET: {
          target: "idle",
          actions: assign({
            data: null,
            error: null
          })
        }
      }
    },
    error: {
      on: {
        RETRY: "loading",
        RESET: {
          target: "idle",
          actions: assign({
            data: null,
            error: null
          })
        }
      }
    }
  }
});

// 2. Services (side effects)
const services = {
  fetchData: async (context, event) => {
    const response = await fetch(event.url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  }
};

// 3. React component using the machine
function FetchComponent({ url }) {
  const [state, send] = useMachine(fetchMachine, {
    services
  });
  
  const { data, error } = state.context;
  
  const handleFetch = () => {
    send({ type: "FETCH", url });
  };
  
  const handleCancel = () => {
    send({ type: "CANCEL" });
  };
  
  const handleRetry = () => {
    send({ type: "RETRY", url });
  };
  
  const handleReset = () => {
    send({ type: "RESET" });
  };
  
  return (
    <div>
      <div>Current state: {state.value}</div>
      
      {state.matches("idle") && (
        <button onClick={handleFetch}>
          Fetch Data
        </button>
      )}
      
      {state.matches("loading") && (
        <div>
          <div>Loading...</div>
          <button onClick={handleCancel}>Cancel</button>
        </div>
      )}
      
      {state.matches("success") && (
        <div>
          <h3>Data loaded successfully</h3>
          <pre>{JSON.stringify(data, null, 2)}</pre>
          <button onClick={handleFetch}>Refetch</button>
          <button onClick={handleReset}>Reset</button>
        </div>
      )}
      
      {state.matches("error") && (
        <div>
          <h3>Error: {error?.message}</h3>
          <button onClick={handleRetry}>Retry</button>
          <button onClick={handleReset}>Reset</button>
        </div>
      )}
    </div>
  );
}

// 4. TypeScript version
interface FetchContext {
  data: any;
  error: Error | null;
}

type FetchEvent =
  | { type: "FETCH"; url: string }
  | { type: "CANCEL" }
  | { type: "RETRY"; url: string }
  | { type: "RESET" }
  | { type: "REFETCH"; url: string };

type FetchState =
  | { value: "idle"; context: FetchContext }
  | { value: "loading"; context: FetchContext }
  | { value: "success"; context: FetchContext & { data: any } }
  | { value: "error"; context: FetchContext & { error: Error } };

// 5. Form machine example
const formMachine = createMachine({
  id: "form",
  initial: "editing",
  context: {
    values: {},
    errors: {},
    touched: {}
  },
  states: {
    editing: {
      on: {
        CHANGE: {
          actions: assign({
            values: (context, event) => ({
              ...context.values,
              [event.field]: event.value
            })
          })
        },
        BLUR: {
          actions: assign({
            touched: (context, event) => ({
              ...context.touched,
              [event.field]: true
            })
          })
        },
        SUBMIT: {
          target: "validating",
          cond: "hasChanges"
        }
      }
    },
    validating: {
      invoke: {
        src: "validateForm",
        onDone: [
          {
            target: "submitting",
            cond: (_, event) => event.data.isValid
          },
          {
            target: "editing",
            actions: assign({
              errors: (_, event) => event.data.errors
            })
          }
        ]
      }
    },
    submitting: {
      invoke: {
        src: "submitForm",
        onDone: "success",
        onError: {
          target: "editing",
          actions: assign({
            errors: (_, event) => ({ submit: event.data.message })
          })
        }
      }
    },
    success: {
      type: "final"
    }
  }
});

// 6. Parallel states
const multiStepFormMachine = createMachine({
  id: "multiStepForm",
  type: "parallel",
  states: {
    step1: {
      initial: "idle",
      states: {
        idle: { on: { NEXT: "completed" } },
        completed: { type: "final" }
      }
    },
    step2: {
      initial: "idle",
      states: {
        idle: { on: { NEXT: "completed" } },
        completed: { type: "final" }
      }
    },
    step3: {
      initial: "idle",
      states: {
        idle: { 
          on: { 
            NEXT: "completed",
            SKIP: "skipped" 
          } 
        },
        completed: { type: "final" },
        skipped: { type: "final" }
      }
    }
  },
  on: {
    RESET: {
      target: [".step1.idle", ".step2.idle", ".step3.idle"]
    }
  }
});

// 1. Custom hook for optimistic updates
function useOptimisticUpdate(initialData, updateFn, options = {}) {
  const [data, setData] = useState(initialData);
  const [optimisticUpdates, setOptimisticUpdates] = useState(new Map());
  const [errors, setErrors] = useState(new Map());
  
  const applyUpdate = useCallback(async (id, update) => {
    // Generate optimistic ID
    const optimisticId = `opt_${Date.now()}`;
    
    // 1. Apply optimistic update immediately
    setData(prev => {
      const newData = [...prev];
      const index = newData.findIndex(item => item.id === id);
      
      if (index !== -1) {
        newData[index] = {
          ...newData[index],
          ...update,
          _optimisticId: optimisticId,
          _isOptimistic: true
        };
      }
      
      return newData;
    });
    
    // Store optimistic update
    setOptimisticUpdates(prev => 
      new Map(prev).set(optimisticId, { id, update })
    );
    
    try {
      // 2. Send actual API request
      const result = await updateFn(id, update);
      
      // 3. Replace optimistic item with real data
      setData(prev => {
        const newData = [...prev];
        const index = newData.findIndex(
          item => item._optimisticId === optimisticId
        );
        
        if (index !== -1) {
          newData[index] = {
            ...result,
            _optimisticId: undefined,
            _isOptimistic: false
          };
        }
        
        return newData;
      });
      
      // Remove from optimistic updates
      setOptimisticUpdates(prev => {
        const next = new Map(prev);
        next.delete(optimisticId);
        return next;
      });
      
      return { success: true, data: result };
      
    } catch (error) {
      // 4. Rollback on error
      setData(prev => {
        const newData = [...prev];
        const index = newData.findIndex(
          item => item._optimisticId === optimisticId
        );
        
        if (index !== -1) {
          // Remove the optimistic item
          newData.splice(index, 1);
        }
        
        return newData;
      });
      
      // Store error
      setErrors(prev => 
        new Map(prev).set(optimisticId, { error, id, update })
      );
      
      // Remove from optimistic updates
      setOptimisticUpdates(prev => {
        const next = new Map(prev);
        next.delete(optimisticId);
        return next;
      });
      
      return { success: false, error };
    }
  }, [updateFn]);
  
  const retryUpdate = useCallback(async (optimisticId) => {
    const failedUpdate = errors.get(optimisticId);
    if (!failedUpdate) return;
    
    // Remove from errors
    setErrors(prev => {
      const next = new Map(prev);
      next.delete(optimisticId);
      return next;
    });
    
    // Retry the update
    return applyUpdate(failedUpdate.id, failedUpdate.update);
  }, [errors, applyUpdate]);
  
  const retryAll = useCallback(async () => {
    const results = [];
    for (const [optimisticId] of errors) {
      const result = await retryUpdate(optimisticId);
      results.push(result);
    }
    return results;
  }, [errors, retryUpdate]);
  
  return {
    data,
    applyUpdate,
    retryUpdate,
    retryAll,
    optimisticCount: optimisticUpdates.size,
    errorCount: errors.size,
    hasErrors: errors.size > 0
  };
}

// 2. Todo list component using optimistic updates
function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: "Learn React", completed: false }
  ]);
  
  const api = {
    updateTodo: async (id, updates) => {
      const response = await fetch(`/api/todos/${id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(updates)
      });
      return response.json();
    }
  };
  
  const {
    data: optimisticTodos,
    applyUpdate,
    retryAll,
    hasErrors
  } = useOptimisticUpdate(todos, api.updateTodo);
  
  const toggleTodo = async (id) => {
    const todo = optimisticTodos.find(t => t.id === id);
    if (!todo) return;
    
    await applyUpdate(id, { completed: !todo.completed });
  };
  
  const addTodo = async (text) => {
    const optimisticId = `new_${Date.now()}`;
    
    // Optimistic add
    setTodos(prev => [
      ...prev,
      { id: optimisticId, text, completed: false, _isOptimistic: true }
    ]);
    
    try {
      // Real API call
      const response = await fetch("/api/todos", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text, completed: false })
      });
      
      const newTodo = await response.json();
      
      // Replace optimistic with real
      setTodos(prev => 
        prev.map(todo => 
          todo.id === optimisticId ? newTodo : todo
        )
      );
      
    } catch (error) {
      // Rollback
      setTodos(prev => 
        prev.filter(todo => todo.id !== optimisticId)
      );
      
      alert("Failed to add todo");
    }
  };
  
  return (
    <div>
      {hasErrors && (
        <div className="error-banner">
          Some updates failed. 
          <button onClick={retryAll}>Retry All</button>
        </div>
      )}
      
      <ul>
        {optimisticTodos.map(todo => (
          <li 
            key={todo.id}
            className={`todo-item ${todo._isOptimistic ? "optimistic" : ""}`}
          >
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
              disabled={todo._isOptimistic}
            />
            <span style={{
              textDecoration: todo.completed ? "line-through" : "none",
              opacity: todo._isOptimistic ? 0.6 : 1
            }}>
              {todo.text}
            </span>
            {todo._isOptimistic && (
              <span className="optimistic-badge">Saving...</span>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

// 3. Optimistic delete
function useOptimisticDelete(deleteFn) {
  const [deletingIds, setDeletingIds] = useState(new Set());
  
  const deleteItem = useCallback(async (id) => {
    // Add to deleting set
    setDeletingIds(prev => new Set(prev).add(id));
    
    try {
      await deleteFn(id);
      // Success - remove from set
      setDeletingIds(prev => {
        const next = new Set(prev);
        next.delete(id);
        return next;
      });
    } catch (error) {
      // Error - remove from set and show error
      setDeletingIds(prev => {
        const next = new Set(prev);
        next.delete(id);
        return next;
      });
      throw error;
    }
  }, [deleteFn]);
  
  return { deleteItem, deletingIds };
}

// 1. Virtualized list component
function VirtualizedList({
  items,
  itemHeight,
  containerHeight,
  renderItem,
  loading,
  onLoadMore
}) {
  const containerRef = useRef();
  const [scrollTop, setScrollTop] = useState(0);
  
  // Calculate visible items
  const totalItems = items.length;
  const visibleCount = Math.ceil(containerHeight / itemHeight);
  
  // Find start and end indices
  const startIndex = Math.max(
    0,
    Math.floor(scrollTop / itemHeight) - 5 // Buffer
  );
  
  const endIndex = Math.min(
    totalItems - 1,
    startIndex + visibleCount + 10 // Buffer
  );
  
  // Handle scroll
  const handleScroll = useCallback((e) => {
    const scrollTop = e.target.scrollTop;
    setScrollTop(scrollTop);
    
    // Check if we need to load more
    const scrollBottom = scrollTop + containerHeight;
    const totalHeight = totalItems * itemHeight;
    
    if (scrollBottom >= totalHeight - 500 && !loading) {
      onLoadMore();
    }
  }, [containerHeight, totalItems, itemHeight, loading, onLoadMore]);
  
  // Calculate container style
  const containerStyle = {
    height: containerHeight,
    overflowY: "auto",
    position: "relative"
  };
  
  // Calculate inner container height
  const innerHeight = totalItems * itemHeight;
  
  // Calculate transform for visible items
  const transform = `translateY(${startIndex * itemHeight}px)`;
  
  return (
    <div 
      ref={containerRef}
      style={containerStyle}
      onScroll={handleScroll}
      role="list"
      aria-label="Virtualized list"
    >
      <div style={{ height: innerHeight, position: "relative" }}>
        <div style={{ transform, position: "absolute", width: "100%" }}>
          {items.slice(startIndex, endIndex + 1).map((item, index) => {
            const actualIndex = startIndex + index;
            return (
              <div
                key={item.id || actualIndex}
                style={{ height: itemHeight }}
                role="listitem"
                aria-posinset={actualIndex + 1}
                aria-setsize={totalItems}
              >
                {renderItem(item, actualIndex)}
              </div>
            );
          })}
        </div>
      </div>
      
      {loading && (
        <div style={{ textAlign: "center", padding: "20px" }}>
          Loading more items...
        </div>
      )}
    </div>
  );
}

// 2. Infinite scroll hook
function useInfiniteScroll(fetchFn, initialData = []) {
  const [items, setItems] = useState(initialData);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [error, setError] = useState(null);
  
  const loadMore = useCallback(async () => {
    if (loading || !hasMore) return;
    
    setLoading(true);
    setError(null);
    
    try {
      const result = await fetchFn(page);
      
      setItems(prev => [...prev, ...result.data]);
      setHasMore(result.hasMore);
      setPage(prev => prev + 1);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  }, [page, loading, hasMore, fetchFn]);
  
  const reset = useCallback(() => {
    setItems(initialData);
    setPage(1);
    setHasMore(true);
    setError(null);
  }, [initialData]);
  
  return {
    items,
    loading,
    error,
    hasMore,
    loadMore,
    reset
  };
}

// 3. Lazy image component
function LazyImage({ src, alt, width, height }) {
  const [isLoaded, setIsLoaded] = useState(false);
  const [isInView, setIsInView] = useState(false);
  const imgRef = useRef();
  const placeholderRef = useRef();
  
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsInView(true);
          observer.unobserve(entry.target);
        }
      },
      { rootMargin: "50px" }
    );
    
    if (placeholderRef.current) {
      observer.observe(placeholderRef.current);
    }
    
    return () => observer.disconnect();
  }, []);
  
  return (
    <div 
      ref={placeholderRef}
      style={{ 
        width,
        height,
        backgroundColor: "#f0f0f0",
        position: "relative"
      }}
    >
      {isInView && (
        <img
          ref={imgRef}
          src={src}
          alt={alt}
          style={{
            width: "100%",
            height: "100%",
            objectFit: "cover",
            opacity: isLoaded ? 1 : 0,
            transition: "opacity 0.3s"
          }}
          onLoad={() => setIsLoaded(true)}
          loading="lazy"
        />
      )}
      
      {!isLoaded && (
        <div style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          display: "flex",
          alignItems: "center",
          justifyContent: "center"
        }}>
          <div className="spinner" />
        </div>
      )}
    </div>
  );
}

// 4. Complete example
function InfiniteProductList() {
  const fetchProducts = useCallback(async (page) => {
    const response = await fetch(`/api/products?page=${page}&limit=20`);
    const data = await response.json();
    
    return {
      data: data.products,
      hasMore: data.page < data.totalPages
    };
  }, []);
  
  const {
    items: products,
    loading,
    error,
    hasMore,
    loadMore
  } = useInfiniteScroll(fetchProducts, []);
  
  const renderProduct = useCallback((product, index) => (
    <div style={{
      display: "flex",
      padding: "10px",
      borderBottom: "1px solid #eee"
    }}>
      <LazyImage
        src={product.image}
        alt={product.name}
        width={100}
        height={100}
      />
      <div style={{ marginLeft: "20px" }}>
        <h3>{product.name}</h3>
        <p>${product.price}</p>
      </div>
    </div>
  ), []);
  
  return (
    <div>
      <h2>Products ({products.length})</h2>
      
      {error && (
        <div style={{ color: "red", padding: "10px" }}>
          Error loading products. 
          <button onClick={loadMore}>Retry</button>
        </div>
      )}
      
      <VirtualizedList
        items={products}
        itemHeight={120}
        containerHeight={600}
        renderItem={renderProduct}
        loading={loading}
        onLoadMore={loadMore}
      />
      
      {!hasMore && products.length > 0 && (
        <div style={{ textAlign: "center", padding: "20px" }}>
          No more products to load
        </div>
      )}
    </div>
  );
}

// 5. Window scrolling with intersection observer
function useInView(ref, options = {}) {
  const [isInView, setIsInView] = useState(false);
  
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setIsInView(entry.isIntersecting);
    }, options);
    
    if (ref.current) {
      observer.observe(ref.current);
    }
    
    return () => observer.disconnect();
  }, [ref, options]);
  
  return isInView;
}

import { useForm, Controller, useFieldArray } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

// 1. Schema validation with Yup
const userSchema = yup.object({
  name: yup.string().required("Name is required").min(2, "Too short"),
  email: yup.string().email("Invalid email").required("Email is required"),
  age: yup.number().min(18, "Must be 18+").max(100, "Too old"),
  password: yup.string()
    .required("Password is required")
    .min(8, "Must be at least 8 characters")
    .matches(/[a-z]/, "Must contain lowercase")
    .matches(/[A-Z]/, "Must contain uppercase")
    .matches(/\d/, "Must contain number"),
  confirmPassword: yup.string()
    .oneOf([yup.ref("password")], "Passwords must match")
    .required("Confirm password"),
  interests: yup.array().of(
    yup.object({
      name: yup.string().required(),
      level: yup.string().oneOf(["beginner", "intermediate", "advanced"])
    })
  ).min(1, "Select at least one interest"),
  subscription: yup.boolean(),
  avatar: yup.mixed()
    .test("fileSize", "File too large", value => 
      !value || (value && value.size <= 5000000)
    )
    .test("fileType", "Unsupported format", value =>
      !value || (value && [".jpg", ".png", ".jpeg"].includes(value.name))
    )
});

// 2. Complex form with dynamic fields
function UserForm() {
  const {
    register,
    handleSubmit,
    control,
    watch,
    formState: { errors, isSubmitting, isValid, touchedFields },
    reset,
    setValue,
    trigger
  } = useForm({
    resolver: yupResolver(userSchema),
    mode: "onChange", // Validate on change
    defaultValues: {
      name: "",
      email: "",
      age: 18,
      interests: [{ name: "", level: "beginner" }],
      subscription: true
    }
  });
  
  // Watch form values
  const subscription = watch("subscription");
  const password = watch("password");
  
  // Dynamic field array
  const { fields, append, remove } = useFieldArray({
    control,
    name: "interests"
  });
  
  // Handle file upload
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    setValue("avatar", file);
    trigger("avatar"); // Trigger validation
  };
  
  // Submit handler
  const onSubmit = async (data) => {
    try {
      // Create FormData for file upload
      const formData = new FormData();
      Object.keys(data).forEach(key => {
        if (key === "avatar" && data[key]) {
          formData.append(key, data[key]);
        } else if (key === "interests") {
          formData.append(key, JSON.stringify(data[key]));
        } else {
          formData.append(key, data[key]);
        }
      });
      
      const response = await fetch("/api/users", {
        method: "POST",
        body: formData
      });
      
      if (response.ok) {
        alert("User created successfully!");
        reset();
      }
    } catch (error) {
      console.error("Error:", error);
    }
  };
  
  // Dynamic validation
  useEffect(() => {
    if (password && password.length < 8) {
      setValue("passwordStrength", "weak");
    } else if (password && password.length >= 8) {
      setValue("passwordStrength", "strong");
    }
  }, [password, setValue]);
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Text input */}
      <div>
        <label>Name</label>
        <input 
          {...register("name")}
          placeholder="Enter your name"
          aria-invalid={errors.name ? "true" : "false"}
        />
        {errors.name && (
          <span role="alert">{errors.name.message}</span>
        )}
      </div>
      
      {/* Email with validation */}
      <div>
        <label>Email</label>
        <input
          type="email"
          {...register("email")}
          placeholder="email@example.com"
        />
        {errors.email && (
          <span role="alert">{errors.email.message}</span>
        )}
      </div>
      
      {/* Number input */}
      <div>
        <label>Age</label>
        <input
          type="number"
          {...register("age", { valueAsNumber: true })}
        />
        {errors.age && (
          <span role="alert">{errors.age.message}</span>
        )}
      </div>
      
      {/* Password with strength */}
      <div>
        <label>Password</label>
        <input
          type="password"
          {...register("password")}
        />
        {password && (
          <div>
            Strength: {password.length < 8 ? "Weak" : "Strong"}
          </div>
        )}
        {errors.password && (
          <span role="alert">{errors.password.message}</span>
        )}
      </div>
      
      {/* Confirm password */}
      <div>
        <label>Confirm Password</label>
        <input
          type="password"
          {...register("confirmPassword")}
        />
        {errors.confirmPassword && (
          <span role="alert">{errors.confirmPassword.message}</span>
        )}
      </div>
      
      {/* Dynamic fields */}
      <div>
        <label>Interests</label>
        {fields.map((field, index) => (
          <div key={field.id}>
            <input
              {...register(`interests.${index}.name`)}
              placeholder="Interest name"
            />
            <select
              {...register(`interests.${index}.level`)}
            >
              <option value="beginner">Beginner</option>
              <option value="intermediate">Intermediate</option>
              <option value="advanced">Advanced</option>
            </select>
            <button type="button" onClick={() => remove(index)}>
              Remove
            </button>
          </div>
        ))}
        <button 
          type="button"
          onClick={() => append({ name: "", level: "beginner" })}
        >
          Add Interest
        </button>
        {errors.interests && (
          <span role="alert">{errors.interests.message}</span>
        )}
      </div>
      
      {/* File upload */}
      <div>
        <label>Avatar</label>
        <input
          type="file"
          accept=".jpg,.jpeg,.png"
          onChange={handleFileChange}
        />
        {errors.avatar && (
          <span role="alert">{errors.avatar.message}</span>
        )}
      </div>
      
      {/* Checkbox */}
      <div>
        <label>
          <input type="checkbox" {...register("subscription")} />
          Subscribe to newsletter
        </label>
      </div>
      
      {/* Conditional field */}
      {subscription && (
        <div>
          <label>Newsletter frequency</label>
          <select {...register("frequency")}>
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
          </select>
        </div>
      )}
      
      <button 
        type="submit" 
        disabled={isSubmitting || !isValid}
      >
        {isSubmitting ? "Submitting..." : "Submit"}
      </button>
      
      <button type="button" onClick={() => reset()}>
        Reset
      </button>
    </form>
  );
}

// 3. Multi-step form
function MultiStepForm() {
  const [step, setStep] = useState(1);
  const { handleSubmit, trigger, formState } = useForm();
  
  const nextStep = async () => {
    // Validate current step
    const isValid = await trigger();
    if (isValid) {
      setStep(prev => prev + 1);
    }
  };
  
  const prevStep = () => {
    setStep(prev => prev - 1);
  };
  
  return (
    <form onSubmit={handleSubmit(() => {})}>
      {step === 1 && (
        <div>
          <h2>Step 1: Personal Info</h2>
          {/* Step 1 fields */}
        </div>
      )}
      
      {step === 2 && (
        <div>
          <h2>Step 2: Address</h2>
          {/* Step 2 fields */}
        </div>
      )}
      
      {step === 3 && (
        <div>
          <h2>Step 3: Review</h2>
          {/* Review fields */}
        </div>
      )}
      
      <div>
        {step > 1 && (
          <button type="button" onClick={prevStep}>
            Previous
          </button>
        )}
        
        {step < 3 ? (
          <button type="button" onClick={nextStep}>
            Next
          </button>
        ) : (
          <button type="submit">Submit</button>
        )}
      </div>
      
      <div>
        Step {step} of 3
      </div>
    </form>
  );
}

// 4. Custom form hook
function useCustomForm(defaultValues) {
  const methods = useForm({ defaultValues });
  const [serverErrors, setServerErrors] = useState({});
  
  const handleServerError = useCallback((error) => {
    if (error.response?.data?.errors) {
      error.response.data.errors.forEach(err => {
        methods.setError(err.field, {
          type: "server",
          message: err.message
        });
      });
    }
    setServerErrors(error.response?.data?.errors || {});
  }, [methods]);
  
  return {
    ...methods,
    serverErrors,
    handleServerError
  };
}

// 1. Auth context provider
const AuthContext = createContext();

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  // Initialize auth state
  useEffect(() => {
    const initAuth = async () => {
      try {
        // Check for stored token
        const token = localStorage.getItem("token");
        
        if (token) {
          // Validate token
          const user = await validateToken(token);
          setUser(user);
        }
      } catch (err) {
        console.error("Auth init error:", err);
        localStorage.removeItem("token");
        localStorage.removeItem("refreshToken");
      } finally {
        setLoading(false);
      }
    };
    
    initAuth();
  }, []);
  
  // Login function
  const login = async (credentials) => {
    setError(null);
    
    try {
      const response = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(credentials)
      });
      
      if (!response.ok) {
        throw new Error("Login failed");
      }
      
      const { user, token, refreshToken } = await response.json();
      
      // Store tokens
      localStorage.setItem("token", token);
      localStorage.setItem("refreshToken", refreshToken);
      
      // Set user
      setUser(user);
      
      return { success: true, user };
      
    } catch (err) {
      setError(err.message);
      return { success: false, error: err.message };
    }
  };
  
  // Logout function
  const logout = () => {
    // Clear storage
    localStorage.removeItem("token");
    localStorage.removeItem("refreshToken");
    
    // Clear user
    setUser(null);
    
    // Optional: Call logout endpoint
    fetch("/api/auth/logout", { method: "POST" });
  };
  
  // Refresh token
  const refreshAuthToken = async () => {
    try {
      const refreshToken = localStorage.getItem("refreshToken");
      
      if (!refreshToken) {
        throw new Error("No refresh token");
      }
      
      const response = await fetch("/api/auth/refresh", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ refreshToken })
      });
      
      if (!response.ok) {
        throw new Error("Token refresh failed");
      }
      
      const { token, refreshToken: newRefreshToken } = await response.json();
      
      // Update tokens
      localStorage.setItem("token", token);
      localStorage.setItem("refreshToken", newRefreshToken);
      
      return token;
      
    } catch (err) {
      logout();
      throw err;
    }
  };
  
  // Update user
  const updateUser = (updates) => {
    setUser(prev => ({ ...prev, ...updates }));
  };
  
  const value = {
    user,
    loading,
    error,
    login,
    logout,
    refreshAuthToken,
    updateUser,
    isAuthenticated: !!user
  };
  
  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

// 2. Protected route component
function ProtectedRoute({ children, roles = [] }) {
  const { user, loading, isAuthenticated } = useAuth();
  const location = useLocation();
  
  if (loading) {
    return <div>Loading auth...</div>;
  }
  
  if (!isAuthenticated) {
    // Redirect to login
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  
  // Check roles if specified
  if (roles.length > 0 && user && !roles.includes(user.role)) {
    return <Navigate to="/unauthorized" replace />;
  }
  
  return children;
}

// 3. Auth hook
function useAuth() {
  const context = useContext(AuthContext);
  
  if (!context) {
    throw new Error("useAuth must be used within AuthProvider");
  }
  
  return context;
}

// 4. Axios interceptor for token refresh
function setupAxiosInterceptors(refreshAuthToken, logout) {
  let isRefreshing = false;
  let failedQueue = [];
  
  const processQueue = (error, token = null) => {
    failedQueue.forEach(prom => {
      if (error) {
        prom.reject(error);
      } else {
        prom.resolve(token);
      }
    });
    
    failedQueue = [];
  };
  
  axios.interceptors.request.use(
    (config) => {
      const token = localStorage.getItem("token");
      
      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
      
      return config;
    },
    (error) => Promise.reject(error)
  );
  
  axios.interceptors.response.use(
    (response) => response,
    async (error) => {
      const originalRequest = error.config;
      
      // If 401 and not a retry
      if (error.response?.status === 401 && !originalRequest._retry) {
        
        if (isRefreshing) {
          // Queue the request
          return new Promise((resolve, reject) => {
            failedQueue.push({ resolve, reject });
          })
            .then(token => {
              originalRequest.headers.Authorization = `Bearer ${token}`;
              return axios(originalRequest);
            })
            .catch(err => Promise.reject(err));
        }
        
        originalRequest._retry = true;
        isRefreshing = true;
        
        try {
          const newToken = await refreshAuthToken();
          
          // Update Authorization header
          originalRequest.headers.Authorization = `Bearer ${newToken}`;
          
          // Process queued requests
          processQueue(null, newToken);
          
          // Retry original request
          return axios(originalRequest);
          
        } catch (refreshError) {
          processQueue(refreshError, null);
          logout();
          return Promise.reject(refreshError);
          
        } finally {
          isRefreshing = false;
        }
      }
      
      return Promise.reject(error);
    }
  );
}

// 5. Social login component
function SocialLogin({ provider }) {
  const { login } = useAuth();
  
  const handleSocialLogin = async () => {
    // Open OAuth window
    const width = 600;
    const height = 600;
    const left = window.screenX + (window.outerWidth - width) / 2;
    const top = window.screenY + (window.outerHeight - height) / 2;
    
    const url = `/api/auth/${provider}`;
    
    const popup = window.open(
      url,
      `${provider} Login`,
      `width=${width},height=${height},left=${left},top=${top}`
    );
    
    // Listen for message from popup
    const messageHandler = (event) => {
      if (event.origin !== window.location.origin) return;
      
      if (event.data.type === "OAUTH_SUCCESS") {
        const { token, user } = event.data;
        
        // Store token
        localStorage.setItem("token", token);
        
        // Update auth context
        login({ token, user });
        
        // Cleanup
        window.removeEventListener("message", messageHandler);
        popup.close();
      }
    };
    
    window.addEventListener("message", messageHandler);
  };
  
  return (
    <button onClick={handleSocialLogin}>
      Continue with {provider}
    </button>
  );
}

// 6. Role-based component
function RoleGuard({ children, roles }) {
  const { user } = useAuth();
  
  if (!user || !roles.includes(user.role)) {
    return null;
  }
  
  return children;
}

// 7. App setup with auth
function App() {
  return (
    <AuthProvider>
      <Router>
        <Routes>
          {/* Public routes */}
          <Route path="/login" element={<LoginPage />} />
          <Route path="/register" element={<RegisterPage />} />
          
          {/* Protected routes */}
          <Route path="/dashboard" element={
            <ProtectedRoute>
              <Dashboard />
            </ProtectedRoute>
          } />
          
          <Route path="/admin" element={
            <ProtectedRoute roles={["admin"]}>
              <AdminPanel />
            </ProtectedRoute>
          } />
        </Routes>
      </Router>
    </AuthProvider>
  );
}

// 1. Translation files
const translations = {
  en: {
    welcome: "Welcome, {{name}}!",
    products: {
      one: "{{count}} product",
      other: "{{count}} products"
    },
    date: "Today is {{date, datetime}}",
    price: "Price: {{price, currency}}",
    buttons: {
      save: "Save",
      cancel: "Cancel"
    }
  },
  fr: {
    welcome: "Bienvenue, {{name}} !",
    products: {
      one: "{{count}} produit",
      other: "{{count}} produits"
    },
    date: "Aujourd'hui, c'est le {{date, datetime}}",
    price: "Prix : {{price, currency}}",
    buttons: {
      save: "Enregistrer",
      cancel: "Annuler"
    }
  },
  ar: {
    welcome: "مرحبًا {{name}}!",
    products: {
      one: "{{count}} منتج",
      other: "{{count}} منتجات"
    },
    date: "اليوم هو {{date, datetime}}",
    price: "السعر: {{price, currency}}",
    buttons: {
      save: "حفظ",
      cancel: "إلغاء"
    }
  }
};

// 2. i18n context
const I18nContext = createContext();

function I18nProvider({ children }) {
  const [locale, setLocale] = useState(
    () => localStorage.getItem("locale") || "en"
  );
  const [direction, setDirection] = useState("ltr");
  
  // Update direction based on locale
  useEffect(() => {
    const newDirection = ["ar", "he"].includes(locale) ? "rtl" : "ltr";
    setDirection(newDirection);
    
    // Update HTML dir attribute
    document.documentElement.dir = newDirection;
    document.documentElement.lang = locale;
  }, [locale]);
  
  // Format message
  const formatMessage = (id, values = {}) => {
    const keys = id.split(".");
    let message = keys.reduce((obj, key) => obj?.[key], translations[locale]);
    
    if (!message) {
      console.warn(`Translation missing: ${id} for locale ${locale}`);
      return id;
    }
    
    // Handle pluralization
    if (typeof message === "object" && "one" in message && "other" in message) {
      const count = values.count || 0;
      message = count === 1 ? message.one : message.other;
    }
    
    // Replace variables
    return message.replace(/\{\{(.+?)\}\}/g, (match, key) => {
      const [varName, format] = key.trim().split(",");
      const value = values[varName.trim()];
      
      if (format) {
        return formatValue(value, format.trim());
      }
      
      return value != null ? value : match;
    });
  };
  
  // Format values based on type
  const formatValue = (value, format) => {
    switch (format) {
      case "datetime":
        return new Intl.DateTimeFormat(locale, {
          dateStyle: "long",
          timeStyle: "short"
        }).format(new Date(value));
        
      case "currency":
        return new Intl.NumberFormat(locale, {
          style: "currency",
          currency: locale === "en" ? "USD" : "EUR"
        }).format(value);
        
      case "number":
        return new Intl.NumberFormat(locale).format(value);
        
      case "percent":
        return new Intl.NumberFormat(locale, {
          style: "percent"
        }).format(value);
        
      default:
        return value;
    }
  };
  
  // Change locale
  const changeLocale = (newLocale) => {
    setLocale(newLocale);
    localStorage.setItem("locale", newLocale);
  };
  
  const value = {
    locale,
    direction,
    formatMessage,
    changeLocale,
    formatValue
  };
  
  return (
    <I18nContext.Provider value={value}>
      <div style={{ direction }}>
        {children}
      </div>
    </I18nContext.Provider>
  );
}

// 3. Custom hook
function useTranslation() {
  const context = useContext(I18nContext);
  
  if (!context) {
    throw new Error("useTranslation must be used within I18nProvider");
  }
  
  return context;
}

// 4. Translation component
function Trans({ id, values, children }) {
  const { formatMessage } = useTranslation();
  
  if (children) {
    // Extract text from children for translation
    return React.Children.map(children, child => {
      if (typeof child === "string") {
        return formatMessage(id || child, values);
      }
      return child;
    });
  }
  
  return formatMessage(id, values);
}

// 5. Usage examples
function WelcomeMessage({ name }) {
  const { formatMessage, locale } = useTranslation();
  
  return (
    <div>
      <h1>{formatMessage("welcome", { name })}</h1>
      <p>{formatMessage("date", { date: new Date() })}</p>
      <p>{formatMessage("price", { price: 19.99 })}</p>
      
      {/* Pluralization */}
      <p>{formatMessage("products", { count: 1 })}</p>
      <p>{formatMessage("products", { count: 5 })}</p>
      
      {/* Using Trans component */}
      <Trans id="buttons.save" />
      <Trans id="buttons.cancel" />
      
      {/* Language switcher */}
      <select 
        value={locale} 
        onChange={(e) => changeLocale(e.target.value)}
      >
        <option value="en">English</option>
        <option value="fr">Français</option>
        <option value="ar">العربية</option>
      </select>
    </div>
  );
}

// 6. RTL support component
function RTLWrapper({ children }) {
  const { direction } = useTranslation();
  
  return (
    <div 
      style={{
        direction,
        textAlign: direction === "rtl" ? "right" : "left"
      }}
    >
      {children}
    </div>
  );
}

// 7. Date formatting hook
function useFormattedDate(date, options = {}) {
  const { locale } = useTranslation();
  
  return useMemo(() => {
    return new Intl.DateTimeFormat(locale, {
      year: "numeric",
      month: "long",
      day: "numeric",
      ...options
    }).format(new Date(date));
  }, [date, locale, options]);
}

// 8. Number formatting hook
function useFormattedNumber(number, options = {}) {
  const { locale } = useTranslation();
  
  return useMemo(() => {
    return new Intl.NumberFormat(locale, {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
      ...options
    }).format(number);
  }, [number, locale, options]);
}

// 9. Async translation loading
function useAsyncTranslations(locale) {
  const [translations, setTranslations] = useState({});
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const loadTranslations = async () => {
      setLoading(true);
      
      try {
        const response = await fetch(`/locales/${locale}.json`);
        const data = await response.json();
        setTranslations(data);
      } catch (error) {
        console.error("Failed to load translations:", error);
      } finally {
        setLoading(false);
      }
    };
    
    loadTranslations();
  }, [locale]);
  
  return { translations, loading };
}

// 10. App setup
function App() {
  return (
    <I18nProvider>
      <RTLWrapper>
        <WelcomeMessage name="John" />
        {/* Rest of app */}
      </RTLWrapper>
    </I18nProvider>
  );
}

// 1. Host app webpack.config.js
module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: "host",
      remotes: {
        nav: "nav@http://localhost:3001/remoteEntry.js",
        dashboard: "dashboard@http://localhost:3002/remoteEntry.js",
        auth: "auth@http://localhost:3003/remoteEntry.js"
      },
      shared: {
        react: { singleton: true, requiredVersion: "^18.0.0" },
        "react-dom": { singleton: true, requiredVersion: "^18.0.0" },
        "react-router-dom": { singleton: true, requiredVersion: "^6.0.0" },
        "@reduxjs/toolkit": { singleton: true },
        // Shared utilities
        "shared-utils": { singleton: true }
      }
    })
  ]
};

// 2. Remote app (navbar) webpack.config.js
module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: "nav",
      filename: "remoteEntry.js",
      exposes: {
        "./Navbar": "./src/components/Navbar",
        "./Footer": "./src/components/Footer",
        "./Header": "./src/components/Header"
      },
      shared: {
        react: { singleton: true, requiredVersion: "^18.0.0" },
        "react-dom": { singleton: true, requiredVersion: "^18.0.0" }
      }
    })
  ]
};

// 3. Host app loading remote components
function App() {
  const [Navbar, setNavbar] = useState(null);
  const [Dashboard, setDashboard] = useState(null);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    // Dynamic import of remote modules
    const loadRemotes = async () => {
      try {
        // Load navbar
        const navModule = await import("nav/Navbar");
        setNavbar(() => navModule.default);
        
        // Load dashboard (lazy)
        const dashboardModule = await import("dashboard/Dashboard");
        setDashboard(() => dashboardModule.default);
        
      } catch (err) {
        setError("Failed to load remote modules");
        console.error(err);
      }
    };
    
    loadRemotes();
  }, []);
  
  if (error) {
    return <div>Error: {error}</div>;
  }
  
  return (
    <div>
      {/* Loaded remote components */}
      {Navbar && <Navbar />}
      
      <main>
        {Dashboard ? (
          <Suspense fallback={<div>Loading dashboard...</div>}>
            <Dashboard />
          </Suspense>
        ) : (
          <div>Loading dashboard...</div>
        )}
      </main>
      
      {/* Local component */}
      <LocalComponent />
    </div>
  );
}

// 4. Cross-app communication with custom events
const EventBus = {
  events: {},
  
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  },
  
  off(event, callback) {
    if (!this.events[event]) return;
    
    const index = this.events[event].indexOf(callback);
    if (index > -1) {
      this.events[event].splice(index, 1);
    }
  },
  
  emit(event, data) {
    if (!this.events[event]) return;
    
    this.events[event].forEach(callback => {
      try {
        callback(data);
      } catch (err) {
        console.error(`Error in event handler for ${event}:`, err);
      }
    });
  }
};

// Usage in micro-frontends
function Navbar() {
  const handleLogout = () => {
    EventBus.emit("user:logout", { userId: 123 });
  };
  
  return (
    <nav>
      <button onClick={handleLogout}>Logout</button>
    </nav>
  );
}

function Dashboard() {
  useEffect(() => {
    const handleLogout = (data) => {
      console.log("Logout event received:", data);
      // Clear dashboard data
    };
    
    EventBus.on("user:logout", handleLogout);
    
    return () => {
      EventBus.off("user:logout", handleLogout);
    };
  }, []);
  
  return <div>Dashboard content</div>;
}

// 5. Shared state management
const SharedStateContext = createContext();

function SharedStateProvider({ children }) {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState("light");
  
  // Sync state across micro-frontends
  useEffect(() => {
    const handleThemeChange = (data) => {
      setTheme(data.theme);
    };
    
    EventBus.on("theme:change", handleThemeChange);
    
    return () => {
      EventBus.off("theme:change", handleThemeChange);
    };
  }, []);
  
  const value = {
    user,
    theme,
    setUser,
    setTheme: (newTheme) => {
      setTheme(newTheme);
      EventBus.emit("theme:change", { theme: newTheme });
    }
  };
  
  return (
    <SharedStateContext.Provider value={value}>
      {children}
    </SharedStateContext.Provider>
  );
}

// 6. Dynamic remote loading with error boundary
function RemoteComponent({ remote, module, fallback, ...props }) {
  const [Component, setComponent] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    const loadComponent = async () => {
      try {
        setLoading(true);
        setError(null);
        
        // Import remote module
        const module = await import(/* webpackIgnore: true */ remote);
        setComponent(() => module.default);
        
      } catch (err) {
        setError(err.message);
        console.error(`Failed to load ${remote}:`, err);
      } finally {
        setLoading(false);
      }
    };
    
    loadComponent();
  }, [remote]);
  
  if (loading) return fallback || <div>Loading...</div>;
  if (error) return <div>Error loading component: {error}</div>;
  if (!Component) return null;
  
  return <Component {...props} />;
}

// Usage
<RemoteComponent
  remote="http://localhost:3001/remoteEntry.js"
  module="./Navbar"
  fallback={<div>Loading navbar...</div>}
/>

// 7. Version management
const RemoteVersionManager = {
  versions: {
    nav: "1.2.0",
    dashboard: "2.1.0",
    auth: "1.0.0"
  },
  
  getRemoteUrl(moduleName) {
    const version = this.versions[moduleName];
    return `https://cdn.example.com/${moduleName}/${version}/remoteEntry.js`;
  },
  
  updateVersion(moduleName, newVersion) {
    this.versions[moduleName] = newVersion;
    // Emit event to reload component
    EventBus.emit("module:update", { module: moduleName, version: newVersion });
  }
};

// 8. Deployment strategy
/*
Production deployment:
1. Each micro-frontend deployed independently
2. CDN for static assets
3. Versioned remoteEntry.js files
4. Blue-green deployment
5. Canary releases

Example CDN URLs:
- https://cdn.example.com/nav/1.2.0/remoteEntry.js
- https://cdn.example.com/dashboard/2.1.0/remoteEntry.js
- https://cdn.example.com/auth/1.0.0/remoteEntry.js
*/

// 1. Theme tokens
const themeTokens = {
  colors: {
    primary: {
      50: "#eff6ff",
      100: "#dbeafe",
      200: "#bfdbfe",
      300: "#93c5fd",
      400: "#60a5fa",
      500: "#3b82f6",
      600: "#2563eb",
      700: "#1d4ed8",
      800: "#1e40af",
      900: "#1e3a8a"
    },
    neutral: {
      50: "#f9fafb",
      100: "#f3f4f6",
      200: "#e5e7eb",
      300: "#d1d5db",
      400: "#9ca3af",
      500: "#6b7280",
      600: "#4b5563",
      700: "#374151",
      800: "#1f2937",
      900: "#111827"
    }
  },
  typography: {
    fontFamily: {
      sans: ["Inter", "sans-serif"],
      mono: ["Roboto Mono", "monospace"]
    },
    fontSize: {
      xs: "0.75rem",    // 12px
      sm: "0.875rem",   // 14px
      base: "1rem",     // 16px
      lg: "1.125rem",   // 18px
      xl: "1.25rem",    // 20px
      "2xl": "1.5rem",  // 24px
      "3xl": "1.875rem", // 30px
      "4xl": "2.25rem"  // 36px
    },
    fontWeight: {
      normal: 400,
      medium: 500,
      semibold: 600,
      bold: 700
    }
  },
  spacing: {
    0: "0",
    1: "0.25rem",  // 4px
    2: "0.5rem",   // 8px
    3: "0.75rem",  // 12px
    4: "1rem",     // 16px
    6: "1.5rem",   // 24px
    8: "2rem",     // 32px
    12: "3rem",    // 48px
    16: "4rem"     // 64px
  },
  borderRadius: {
    none: "0",
    sm: "0.125rem",  // 2px
    base: "0.25rem", // 4px
    md: "0.375rem",  // 6px
    lg: "0.5rem",    // 8px
    xl: "0.75rem",   // 12px
    "2xl": "1rem",   // 16px
    full: "9999px"
  }
};

// 2. Theme context
const ThemeContext = createContext();

function DesignSystemProvider({ children, theme = themeTokens }) {
  const [mode, setMode] = useState("light");
  
  const currentTheme = useMemo(() => ({
    ...theme,
    mode,
    colors: {
      ...theme.colors,
      background: mode === "light" ? "#ffffff" : "#111827",
      text: mode === "light" ? "#111827" : "#f9fafb"
    }
  }), [theme, mode]);
  
  const toggleMode = useCallback(() => {
    setMode(prev => prev === "light" ? "dark" : "light");
  }, []);
  
  return (
    <ThemeContext.Provider value={{ theme: currentTheme, toggleMode, mode }}>
      <GlobalStyles theme={currentTheme} />
      {children}
    </ThemeContext.Provider>
  );
}

// Global styles
function GlobalStyles({ theme }) {
  return (
    <style>
      {`
        :root {
          --color-primary-500: ${theme.colors.primary[500]};
          --color-neutral-500: ${theme.colors.neutral[500]};
          --font-family-sans: ${theme.typography.fontFamily.sans.join(", ")};
          --spacing-4: ${theme.spacing[4]};
          --radius-base: ${theme.borderRadius.base};
        }
        
        body {
          font-family: var(--font-family-sans);
          background-color: ${theme.colors.background};
          color: ${theme.colors.text};
          transition: background-color 0.3s, color 0.3s;
        }
      `}
    </style>
  );
}

// 3. Button component with variants
const Button = React.forwardRef(function Button({
  children,
  variant = "primary",
  size = "medium",
  isLoading = false,
  disabled = false,
  leftIcon,
  rightIcon,
  ...props
}, ref) {
  const { theme } = useTheme();
  
  const baseStyles = {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    fontWeight: theme.typography.fontWeight.medium,
    border: "1px solid transparent",
    borderRadius: theme.borderRadius.base,
    cursor: disabled ? "not-allowed" : "pointer",
    transition: "all 0.2s",
    outline: "none",
    "&:focus-visible": {
      boxShadow: `0 0 0 3px ${theme.colors.primary[100]}`
    }
  };
  
  const variants = {
    primary: {
      backgroundColor: theme.colors.primary[600],
      color: "white",
      "&:hover:not(:disabled)": {
        backgroundColor: theme.colors.primary[700]
      },
      "&:active:not(:disabled)": {
        backgroundColor: theme.colors.primary[800]
      }
    },
    secondary: {
      backgroundColor: theme.colors.neutral[200],
      color: theme.colors.neutral[800],
      "&:hover:not(:disabled)": {
        backgroundColor: theme.colors.neutral[300]
      }
    },
    ghost: {
      backgroundColor: "transparent",
      color: theme.colors.neutral[700],
      "&:hover:not(:disabled)": {
        backgroundColor: theme.colors.neutral[100]
      }
    }
  };
  
  const sizes = {
    small: {
      padding: `${theme.spacing[1]} ${theme.spacing[2]}`,
      fontSize: theme.typography.fontSize.sm
    },
    medium: {
      padding: `${theme.spacing[2]} ${theme.spacing[4]}`,
      fontSize: theme.typography.fontSize.base
    },
    large: {
      padding: `${theme.spacing[3]} ${theme.spacing[6]}`,
      fontSize: theme.typography.fontSize.lg
    }
  };
  
  const styles = {
    ...baseStyles,
    ...variants[variant],
    ...sizes[size],
    opacity: disabled ? 0.6 : 1
  };
  
  return (
    <button
      ref={ref}
      style={styles}
      disabled={disabled || isLoading}
      aria-busy={isLoading}
      {...props}
    >
      {isLoading && (
        <Spinner size="sm" color="currentColor" />
      )}
      
      {!isLoading && leftIcon && (
        <span style={{ marginRight: theme.spacing[1] }}>
          {leftIcon}
        </span>
      )}
      
      {children}
      
      {!isLoading && rightIcon && (
        <span style={{ marginLeft: theme.spacing[1] }}>
          {rightIcon}
        </span>
      )}
    </button>
  );
});

// 4. Input component
const Input = React.forwardRef(function Input({
  label,
  error,
  helperText,
  required,
  disabled,
  leftElement,
  rightElement,
  ...props
}, ref) {
  const { theme } = useTheme();
  const id = useId();
  
  return (
    <div style={{ marginBottom: theme.spacing[4] }}>
      {label && (
        <label 
          htmlFor={id}
          style={{
            display: "block",
            marginBottom: theme.spacing[1],
            fontWeight: theme.typography.fontWeight.medium,
            color: error ? theme.colors.danger : theme.colors.neutral[700]
          }}
        >
          {label}
          {required && (
            <span style={{ color: theme.colors.danger }}>*</span>
          )}
        </label>
      )}
      
      <div style={{ position: "relative" }}>
        {leftElement && (
          <div style={{
            position: "absolute",
            left: theme.spacing[2],
            top: "50%",
            transform: "translateY(-50%)"
          }}>
            {leftElement}
          </div>
        )}
        
        <input
          ref={ref}
          id={id}
          style={{
            width: "100%",
            padding: `${theme.spacing[2]} ${theme.spacing[3]}`,
            paddingLeft: leftElement ? `calc(${theme.spacing[3]} + 24px)` : theme.spacing[3],
            paddingRight: rightElement ? `calc(${theme.spacing[3]} + 24px)` : theme.spacing[3],
            border: `1px solid ${error ? theme.colors.danger : theme.colors.neutral[300]}`,
            borderRadius: theme.borderRadius.base,
            fontSize: theme.typography.fontSize.base,
            color: theme.colors.neutral[900],
            backgroundColor: disabled ? theme.colors.neutral[100] : "white",
            transition: "border-color 0.2s",
            "&:focus": {
              outline: "none",
              borderColor: error ? theme.colors.danger : theme.colors.primary[500],
              boxShadow: `0 0 0 3px ${error ? theme.colors.dangerLight : theme.colors.primary[100]}`
            },
            "&:disabled": {
              cursor: "not-allowed",
              opacity: 0.6
            }
          }}
          disabled={disabled}
          aria-invalid={error ? "true" : "false"}
          aria-describedby={error ? `${id}-error` : helperText ? `${id}-helper` : undefined}
          {...props}
        />
        
        {rightElement && (
          <div style={{
            position: "absolute",
            right: theme.spacing[2],
            top: "50%",
            transform: "translateY(-50%)"
          }}>
            {rightElement}
          </div>
        )}
      </div>
      
      {error && (
        <div 
          id={`${id}-error`}
          style={{
            marginTop: theme.spacing[1],
            color: theme.colors.danger,
            fontSize: theme.typography.fontSize.sm
          }}
          role="alert"
        >
          {error}
        </div>
      )}
      
      {helperText && !error && (
        <div 
          id={`${id}-helper`}
          style={{
            marginTop: theme.spacing[1],
            color: theme.colors.neutral[500],
            fontSize: theme.typography.fontSize.sm
          }}
        >
          {helperText}
        </div>
      )}
    </div>
  );
});

// 5. Compound components (Accordion)
const AccordionContext = createContext();

function Accordion({ children, allowMultiple = false }) {
  const [openItems, setOpenItems] = useState([]);
  
  const toggleItem = useCallback((itemId) => {
    setOpenItems(prev => {
      if (allowMultiple) {
        return prev.includes(itemId)
          ? prev.filter(id => id !== itemId)
          : [...prev, itemId];
      } else {
        return prev.includes(itemId) ? [] : [itemId];
      }
    });
  }, [allowMultiple]);
  
  return (
    <AccordionContext.Provider value={{ openItems, toggleItem }}>
      <div role="region">{children}</div>
    </AccordionContext.Provider>
  );
}

function AccordionItem({ children, id }) {
  const { openItems, toggleItem } = useContext(AccordionContext);
  const isOpen = openItems.includes(id);
  
  return (
    <div style={{ borderBottom: "1px solid #e5e7eb" }}>
      {React.Children.map(children, child =>
        React.cloneElement(child, { isOpen, toggle: () => toggleItem(id) })
      )}
    </div>
  );
}

function AccordionTrigger({ children, isOpen, toggle }) {
  return (
    <button
      onClick={toggle}
      aria-expanded={isOpen}
      style={{
        width: "100%",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        padding: "1rem",
        backgroundColor: "transparent",
        border: "none",
        cursor: "pointer"
      }}
    >
      {children}
      <span>{isOpen ? "▼" : "▶"}</span>
    </button>
  );
}

function AccordionContent({ children, isOpen }) {
  return (
    <div
      style={{
        padding: isOpen ? "1rem" : "0 1rem",
        maxHeight: isOpen ? "1000px" : "0",
        overflow: "hidden",
        transition: "all 0.3s"
      }}
      aria-hidden={!isOpen}
    >
      {children}
    </div>
  );
}

// Usage
<Accordion allowMultiple>
  <AccordionItem id="1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>Content 1</AccordionContent>
  </AccordionItem>
  <AccordionItem id="2">
    <AccordionTrigger>Section 2</AccordionTrigger>
    <AccordionContent>Content 2</AccordionContent>
  </AccordionItem>
</Accordion>

// 6. Storybook stories
/*
// Button.stories.js
export default {
  title: "Components/Button",
  component: Button,
  argTypes: {
    variant: {
      control: { type: "select" },
      options: ["primary", "secondary", "ghost"]
    },
    size: {
      control: { type: "select" },
      options: ["small", "medium", "large"]
    }
  }
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  children: "Primary Button",
  variant: "primary"
};

export const Secondary = Template.bind({});
Secondary.args = {
  children: "Secondary Button",
  variant: "secondary"
};
*/

// 7. Performance optimization
const MemoizedButton = React.memo(Button);
const MemoizedInput = React.memo(Input);

// 8. Theme hook
function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme must be used within DesignSystemProvider");
  }
  return context;
}

// 9. Design tokens access
function useDesignToken(tokenPath) {
  const { theme } = useTheme();
  
  return tokenPath.split(".").reduce((obj, key) => obj?.[key], theme);
}

// Usage: const primaryColor = useDesignToken("colors.primary.500");

// 1. Unit test for component
import { render, screen, fireEvent } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Counter from "./Counter";

describe("Counter", () => {
  it("renders initial count", () => {
    render(<Counter initialCount={5} />);
    expect(screen.getByText("Count: 5")).toBeInTheDocument();
  });
  
  it("increments count when increment button is clicked", async () => {
    render(<Counter initialCount={0} />);
    
    const incrementButton = screen.getByRole("button", { name: /increment/i });
    
    await userEvent.click(incrementButton);
    
    expect(screen.getByText("Count: 1")).toBeInTheDocument();
  });
  
  it("decrements count when decrement button is clicked", async () => {
    render(<Counter initialCount={10} />);
    
    const decrementButton = screen.getByRole("button", { name: /decrement/i });
    
    await userEvent.click(decrementButton);
    
    expect(screen.getByText("Count: 9")).toBeInTheDocument();
  });
  
  it("resets count when reset button is clicked", async () => {
    render(<Counter initialCount={20} />);
    
    const resetButton = screen.getByRole("button", { name: /reset/i });
    
    await userEvent.click(resetButton);
    
    expect(screen.getByText("Count: 0")).toBeInTheDocument();
  });
  
  it("calls onChange callback when count changes", () => {
    const handleChange = jest.fn();
    render(<Counter initialCount={0} onChange={handleChange} />);
    
    fireEvent.click(screen.getByText("Increment"));
    
    expect(handleChange).toHaveBeenCalledWith(1);
  });
});

// 2. Testing custom hook
import { renderHook, act } from "@testing-library/react";
import { useCounter } from "./useCounter";

describe("useCounter", () => {
  it("should use initial value", () => {
    const { result } = renderHook(() => useCounter(5));
    
    expect(result.current.count).toBe(5);
  });
  
  it("should increment", () => {
    const { result } = renderHook(() => useCounter(0));
    
    act(() => {
      result.current.increment();
    });
    
    expect(result.current.count).toBe(1);
  });
  
  it("should decrement", () => {
    const { result } = renderHook(() => useCounter(10));
    
    act(() => {
      result.current.decrement();
    });
    
    expect(result.current.count).toBe(9);
  });
  
  it("should reset", () => {
    const { result } = renderHook(() => useCounter(20));
    
    act(() => {
      result.current.increment();
      result.current.reset();
    });
    
    expect(result.current.count).toBe(0);
  });
  
  it("should not go below min", () => {
    const { result } = renderHook(() => useCounter(0, { min: 0 }));
    
    act(() => {
      result.current.decrement();
    });
    
    expect(result.current.count).toBe(0);
  });
});

// 3. Integration test for form
import { waitFor } from "@testing-library/react";
import LoginForm from "./LoginForm";
import { login } from "./api";

jest.mock("./api");

describe("LoginForm", () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });
  
  it("submits form with valid data", async () => {
    const mockLogin = login.mockResolvedValue({ success: true });
    const onSuccess = jest.fn();
    
    render(<LoginForm onSuccess={onSuccess} />);
    
    const emailInput = screen.getByLabelText(/email/i);
    const passwordInput = screen.getByLabelText(/password/i);
    const submitButton = screen.getByRole("button", { name: /login/i });
    
    // Fill form
    await userEvent.type(emailInput, "test@example.com");
    await userEvent.type(passwordInput, "password123");
    
    // Submit
    await userEvent.click(submitButton);
    
    // Check API call
    expect(mockLogin).toHaveBeenCalledWith({
      email: "test@example.com",
      password: "password123"
    });
    
    // Check success callback
    await waitFor(() => {
      expect(onSuccess).toHaveBeenCalled();
    });
  });
  
  it("shows error on failed login", async () => {
    login.mockRejectedValue(new Error("Invalid credentials"));
    
    render(<LoginForm />);
    
    const emailInput = screen.getByLabelText(/email/i);
    const passwordInput = screen.getByLabelText(/password/i);
    const submitButton = screen.getByRole("button", { name: /login/i });
    
    // Fill form
    await userEvent.type(emailInput, "wrong@example.com");
    await userEvent.type(passwordInput, "wrong");
    
    // Submit
    await userEvent.click(submitButton);
    
    // Check error message
    await waitFor(() => {
      expect(screen.getByText(/invalid credentials/i)).toBeInTheDocument();
    });
  });
  
  it("validates required fields", async () => {
    render(<LoginForm />);
    
    const submitButton = screen.getByRole("button", { name: /login/i });
    
    await userEvent.click(submitButton);
    
    expect(screen.getByText(/email is required/i)).toBeInTheDocument();
    expect(screen.getByText(/password is required/i)).toBeInTheDocument();
    
    expect(login).not.toHaveBeenCalled();
  });
});

// 4. Mocking strategies
// Mock module
export const mockApi = {
  fetchUser: jest.fn(),
  updateUser: jest.fn(),
  deleteUser: jest.fn()
};

jest.mock("./api", () => mockApi);

// Mock window properties
beforeAll(() => {
  Object.defineProperty(window, "matchMedia", {
    writable: true,
    value: jest.fn().mockImplementation(query => ({
      matches: false,
      media: query,
      onchange: null,
      addListener: jest.fn(),
      removeListener: jest.fn(),
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
      dispatchEvent: jest.fn()
    }))
  });
});

// Mock router
import { MemoryRouter } from "react-router-dom";

describe("App with router", () => {
  it("navigates to about page", async () => {
    render(
      <MemoryRouter initialEntries={["/about"]}>
        <App />
      </MemoryRouter>
    );
    
    expect(screen.getByText(/about page/i)).toBeInTheDocument();
  });
});

// Mock context
const mockAuthContext = {
  user: { name: "Test User" },
  login: jest.fn(),
  logout: jest.fn()
};

jest.mock("./AuthContext", () => ({
  useAuth: () => mockAuthContext
}));

// 5. E2E test with Cypress
/*
// login.spec.cy.js
describe("Login", () => {
  beforeEach(() => {
    cy.visit("/login");
  });
  
  it("should login with valid credentials", () => {
    cy.intercept("POST", "/api/login", {
      statusCode: 200,
      body: { user: { name: "John Doe" } }
    }).as("loginRequest");
    
    cy.get("[data-testid=email]").type("test@example.com");
    cy.get("[data-testid=password]").type("password123");
    cy.get("[data-testid=login-button]").click();
    
    cy.wait("@loginRequest");
    cy.url().should("include", "/dashboard");
    cy.contains("Welcome, John Doe").should("be.visible");
  });
  
  it("should show error with invalid credentials", () => {
    cy.intercept("POST", "/api/login", {
      statusCode: 401,
      body: { error: "Invalid credentials" }
    }).as("loginRequest");
    
    cy.get("[data-testid=email]").type("wrong@example.com");
    cy.get("[data-testid=password]").type("wrong");
    cy.get("[data-testid=login-button]").click();
    
    cy.wait("@loginRequest");
    cy.contains("Invalid credentials").should("be.visible");
  });
});
*/

// 6. Snapshot testing
it("renders correctly", () => {
  const { asFragment } = render(<Button>Click me</Button>);
  expect(asFragment()).toMatchSnapshot();
});

// 7. Performance testing
import { measurePerformance } from "reassure";

test("Button render performance", async () => {
  await measurePerformance(<Button>Click me</Button>);
});

// 8. Accessibility testing
import { axe } from "jest-axe";

it("should have no accessibility violations", async () => {
  const { container } = render(<Button>Accessible button</Button>);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

// 9. Test coverage configuration
/*
// jest.config.js
module.exports = {
  collectCoverageFrom: [
    "src/**/*.{js,jsx,ts,tsx}",
    "!src/**/*.d.ts",
    "!src/index.js",
    "!src/reportWebVitals.js"
  ],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80
    }
  }
};
*/

// 10. CI/CD test configuration
/*
// .github/workflows/test.yml
name: Test

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "18"
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run unit tests
        run: npm test -- --coverage
      
      - name: Run integration tests
        run: npm run test:integration
      
      - name: Run E2E tests
        run: npm run test:e2e
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
*/

// 11. Mock server for testing
import { setupServer } from "msw/node";
import { rest } from "msw";

const server = setupServer(
  rest.get("/api/user", (req, res, ctx) => {
    return res(
      ctx.json({ name: "John Doe" })
    );
  }),
  
  rest.post("/api/login", (req, res, ctx) => {
    return res(
      ctx.json({ token: "fake-token" })
    );
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

// 1. Web Vitals tracking
import { getCLS, getFID, getLCP, getFCP, getTTFB } from "web-vitals";

function sendToAnalytics(metric) {
  const body = {
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType
  };
  
  // Send to your analytics
  fetch("/api/analytics/web-vitals", {
    method: "POST",
    body: JSON.stringify(body),
    headers: { "Content-Type": "application/json" }
  });
  
  // Log to console in development
  if (process.env.NODE_ENV === "development") {
    console.log(metric);
  }
}

// Initialize web vitals tracking
function initWebVitals() {
  if (typeof window === "undefined") return;
  
  getCLS(sendToAnalytics);
  getFID(sendToAnalytics);
  getLCP(sendToAnalytics);
  getFCP(sendToAnalytics);
  getTTFB(sendToAnalytics);
}

// 2. React Profiler integration
function ProfilerWrapper({ children, id }) {
  const handleRender = useCallback(
    (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
      // Performance logging
      console.log(`Profiler [${id}]:`, {
        phase,
        actualDuration,
        baseDuration,
        startTime,
        commitTime,
        commitTime - startTime
      });
      
      // Send to analytics for production
      if (process.env.NODE_ENV === "production") {
        const metric = {
          componentId: id,
          phase,
          duration: actualDuration,
          timestamp: Date.now()
        };
        
        // Queue for batch sending
        performanceMetricsQueue.push(metric);
      }
    },
    []
  );
  
  return (
    <React.Profiler id={id} onRender={handleRender}>
      {children}
    </React.Profiler>
  );
}

// 3. Custom performance metrics
class PerformanceMonitor {
  constructor() {
    this.metrics = new Map();
    this.observers = [];
  }
  
  // Start measurement
  start(metricName) {
    if (this.metrics.has(metricName)) {
      console.warn(`Metric "${metricName}" already started`);
      return;
    }
    
    this.metrics.set(metricName, {
      startTime: performance.now(),
      marks: []
    });
  }
  
  // Mark a point in time
  mark(metricName, markName) {
    const metric = this.metrics.get(metricName);
    if (!metric) {
      console.warn(`Metric "${metricName}" not found`);
      return;
    }
    
    metric.marks.push({
      name: markName,
      time: performance.now() - metric.startTime
    });
  }
  
  // End measurement
  end(metricName) {
    const metric = this.metrics.get(metricName);
    if (!metric) {
      console.warn(`Metric "${metricName}" not found`);
      return;
    }
    
    const endTime = performance.now();
    const duration = endTime - metric.startTime;
    
    // Notify observers
    this.observers.forEach(observer => {
      observer({
        name: metricName,
        duration,
        marks: metric.marks,
        startTime: metric.startTime,
        endTime
      });
    });
    
    // Remove from metrics
    this.metrics.delete(metricName);
    
    return duration;
  }
  
  // Add observer
  observe(callback) {
    this.observers.push(callback);
    return () => {
      const index = this.observers.indexOf(callback);
      if (index > -1) this.observers.splice(index, 1);
    };
  }
}

// Singleton instance
export const perfMonitor = new PerformanceMonitor();

// 4. Hook for measuring component render time
function useRenderTime(componentName) {
  const startTime = useRef(performance.now());
  
  useEffect(() => {
    const renderTime = performance.now() - startTime.current;
    
    // Log render time
    if (process.env.NODE_ENV === "development") {
      console.log(`[${componentName}] Render time:`, renderTime.toFixed(2), "ms");
    }
    
    // Send to analytics if too slow
    if (renderTime > 100) { // 100ms threshold
      perfMonitor.end(`${componentName}_render`);
    }
  });
}

// 5. Bundle analysis plugin
function BundleAnalyzer() {
  useEffect(() => {
    if (process.env.NODE_ENV === "development") {
      import("webpack-bundle-analyzer").then(({ BundleAnalyzerPlugin }) => {
        // Could trigger analysis
      });
    }
  }, []);
  
  return null;
}

// 6. Real User Monitoring (RUM) setup
class RUMTracker {
  constructor() {
    this.sessionId = this.generateSessionId();
    this.pageLoadTime = null;
    this.resourceTimings = [];
    
    this.init();
  }
  
  generateSessionId() {
    return "session_" + Math.random().toString(36).substr(2, 9);
  }
  
  init() {
    // Track page load
    window.addEventListener("load", () => {
      this.pageLoadTime = performance.now();
      this.trackPageLoad();
    });
    
    // Track resource timings
    if (performance.getEntriesByType) {
      const resources = performance.getEntriesByType("resource");
      this.resourceTimings = resources.map(resource => ({
        name: resource.name,
        duration: resource.duration,
        initiatorType: resource.initiatorType,
        transferSize: resource.transferSize
      }));
    }
    
    // Track errors
    window.addEventListener("error", this.trackError.bind(this));
    
    // Track unhandled rejections
    window.addEventListener("unhandledrejection", this.trackPromiseError.bind(this));
  }
  
  trackPageLoad() {
    const timing = performance.timing;
    const metrics = {
      sessionId: this.sessionId,
      page: window.location.pathname,
      dns: timing.domainLookupEnd - timing.domainLookupStart,
      tcp: timing.connectEnd - timing.connectStart,
      request: timing.responseStart - timing.requestStart,
      response: timing.responseEnd - timing.responseStart,
      domInteractive: timing.domInteractive - timing.navigationStart,
      domComplete: timing.domComplete - timing.navigationStart,
      loadEvent: timing.loadEventEnd - timing.navigationStart,
      firstPaint: performance.getEntriesByName("first-paint")[0]?.startTime,
      firstContentfulPaint: performance.getEntriesByName("first-contentful-paint")[0]?.startTime
    };
    
    this.sendToBackend("page-load", metrics);
  }
  
  trackError(event) {
    const errorData = {
      sessionId: this.sessionId,
      message: event.message,
      filename: event.filename,
      lineno: event.lineno,
      colno: event.colno,
      error: event.error?.stack
    };
    
    this.sendToBackend("error", errorData);
  }
  
  trackPromiseError(event) {
    const errorData = {
      sessionId: this.sessionId,
      reason: event.reason,
      promise: event.promise
    };
    
    this.sendToBackend("promise-error", errorData);
  }
  
  sendToBackend(type, data) {
    // Use Beacon API for reliability
    const blob = new Blob([JSON.stringify({
      type,
      data,
      timestamp: Date.now(),
      userAgent: navigator.userAgent,
      viewport: `${window.innerWidth}x${window.innerHeight}`
    })], { type: "application/json" });
    
    navigator.sendBeacon("/api/rum", blob);
  }
}

// Initialize RUM
if (typeof window !== "undefined") {
  window.__RUM = new RUMTracker();
}

// 7. Performance optimization hook
function usePerformanceOptimization() {
  const [isSlowConnection, setIsSlowConnection] = useState(false);
  
  useEffect(() => {
    // Check connection speed
    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
    
    if (connection) {
      const handleChange = () => {
        const isSlow = connection.saveData || 
          connection.effectiveType === "slow-2g" || 
          connection.effectiveType === "2g";
        
        setIsSlowConnection(isSlow);
        
        // Emit event for other components
        window.dispatchEvent(new CustomEvent("connection-change", {
          detail: { isSlow }
        }));
      };
      
      connection.addEventListener("change", handleChange);
      handleChange(); // Initial check
      
      return () => connection.removeEventListener("change", handleChange);
    }
  }, []);
  
  return { isSlowConnection };
}

// 8. Lazy loading based on connection
function AdaptiveComponent({ fullComponent, lightComponent, fallback }) {
  const { isSlowConnection } = usePerformanceOptimization();
  
  const Component = isSlowConnection ? lightComponent : fullComponent;
  const LazyComponent = React.lazy(() => 
    isSlowConnection 
      ? import(`./${lightComponent}`)
      : import(`./${fullComponent}`)
  );
  
  return (
    <Suspense fallback={fallback}>
      <LazyComponent />
    </Suspense>
  );
}

// 9. Memory leak detection
function useMemoryLeakDetection(componentName) {
  useEffect(() => {
    const initialMemory = performance.memory?.usedJSHeapSize;
    
    return () => {
      // Check memory on unmount
      setTimeout(() => {
        const currentMemory = performance.memory?.usedJSHeapSize;
        if (currentMemory && initialMemory) {
          const diff = currentMemory - initialMemory;
          if (diff > 10 * 1024 * 1024) { // 10MB threshold
            console.warn(`Potential memory leak in ${componentName}: +${(diff / 1024 / 1024).toFixed(2)}MB`);
          }
        }
      }, 1000);
    };
  }, [componentName]);
}

// 10. Performance budget monitoring
const performanceBudget = {
  bundleSize: 200 * 1024, // 200KB
  firstContentfulPaint: 1800, // 1.8s
  largestContentfulPaint: 2500, // 2.5s
  cumulativeLayoutShift: 0.1,
  timeToInteractive: 3800 // 3.8s
};

function checkPerformanceBudget(metrics) {
  const violations = [];
  
  if (metrics.fcp > performanceBudget.firstContentfulPaint) {
    violations.push(`FCP: ${metrics.fcp}ms > ${performanceBudget.firstContentfulPaint}ms`);
  }
  
  if (metrics.lcp > performanceBudget.largestContentfulPaint) {
    violations.push(`LCP: ${metrics.lcp}ms > ${performanceBudget.largestContentfulPaint}ms`);
  }
  
  if (metrics.cls > performanceBudget.cumulativeLayoutShift) {
    violations.push(`CLS: ${metrics.cls} > ${performanceBudget.cumulativeLayoutShift}`);
  }
  
  if (violations.length > 0) {
    console.warn("Performance budget violations:", violations);
    // Send to monitoring service
    sendToMonitoringService({
      type: "performance-budget-violation",
      violations
    });
  }
}