Frontend Coding

Frontend Coding

Overview

Expert frontend development guidance covering React, Vue, Angular, TypeScript, state management, component architecture, performance optimization, accessibility, testing, and modern web APIs.

Core Capabilities

1. Framework Expertise - React, Vue, Angular, Svelte 2. TypeScript - Type-safe development 3. State Management - Redux, Vuex, Pinia, Context API 4. Component Patterns - Composition, hooks, composables 5. Performance - Code splitting, lazy loading, optimization 6. Accessibility - WCAG compliance, ARIA 7. Testing - Jest, Testing Library, Cypress

Quick Start

React Component Example:

import React, { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
}

export const UserList: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

Critical Tips

1. Use TypeScript - Type safety prevents runtime errors 2. Component composition - Build reusable, composable components 3. Performance matters - Memoization, lazy loading, code splitting 4. Accessibility first - WCAG compliance from the start 5. Test thoroughly - Unit, integration, E2E testing

Framework-Specific Guidance

React Development - See react-development.md for:

• Functional components and hooks (useState, useEffect, useCallback, useMemo)
• Custom hooks and composition patterns
• Context API and prop drilling solutions
• React Server Components and Next.js

React Advanced Patterns - See react-patterns.md for:

• Custom hooks patterns (data fetching, form handling, debouncing)
• Higher-order components (HOC) and render props
• Compound components and controlled/uncontrolled patterns
• Error boundaries and suspense

Vue.js Development - See vuejs-development.md for:

• Composition API and Options API
• Composables and reactivity system
• Vue Router, Pinia state management
• Nuxt.js and server-side rendering

Vue Advanced Patterns - See vue-patterns.md for:

• Composables organization and reusability
• Provide/inject pattern and plugin development
• Custom directives and render functions
• Advanced reactivity patterns

Cross-Framework Topics

Component Patterns - See component-patterns.md for:

• Compound components (tabs, accordions, modals)
• Render props and slots patterns
• Controlled vs uncontrolled components
• Container/presentational component separation

State Management - See state-management.md for:

• Redux, Zustand, Jotai (React)
• Pinia, Vuex (Vue)
• NgRx, Akita (Angular)
• Server state management (React Query, SWR, TanStack Query)

TypeScript Best Practices - See typescript-best-practices.md for:

• Type safety, inference, and utility types
• Generics and advanced type patterns
• Type guards and narrowing
• Framework-specific TypeScript patterns

Best Practices - See best-practices.md for:

• Project structure and code organization
• Naming conventions and file naming
• Testing strategies (unit, integration, E2E)
• Security best practices (XSS, CSRF, input validation)

Performance & Accessibility - See performance-testing.md for:

• Code splitting and lazy loading
• Bundle optimization and tree shaking
• Performance monitoring and profiling
• WCAG compliance and accessibility testing

Best Practices

Code Organization

src/
├── components/
│   ├── common/          # Reusable UI components
│   │   ├── Button/
│   │   ├── Input/
│   │   └── Modal/
│   ├── features/        # Feature-specific components
│   │   ├── auth/
│   │   ├── dashboard/
│   │   └── profile/
│   └── layouts/         # Layout components
├── hooks/               # Custom hooks
├── stores/              # State management
├── services/            # API services
├── utils/               # Helper functions
├── types/               # TypeScript types
└── styles/              # Global styles

Performance Tips

1. Use React.memo for expensive components 2. Implement virtual scrolling for long lists 3. Code split with React.lazy 4. Optimize images (WebP, lazy loading) 5. Use CSS-in-JS efficiently 6. Avoid unnecessary re-renders 7. Debounce/throttle expensive operations

Accessibility

• Use semantic HTML
• Add ARIA labels
• Keyboard navigation support
• Focus management
• Screen reader testing
• Color contrast (WCAG AA/AAA)

Component Patterns

Compound Components

import React, { createContext, useContext, useState } from 'react';

// Context
interface TabsContextValue {
  activeTab: string;
  setActiveTab: (id: string) => void;
}

const TabsContext = createContext<TabsContextValue | undefined>(undefined);

function useTabs() {
  const context = useContext(TabsContext);
  if (!context) throw new Error('Tabs compound components must be used within Tabs');
  return context;
}

// Main component
interface TabsProps {
  defaultTab?: string;
  children: React.ReactNode;
}

function Tabs({ defaultTab, children }: TabsProps) {
  const [activeTab, setActiveTab] = useState(defaultTab || '');

  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

// Sub-components
function TabList({ children }: { children: React.ReactNode }) {
  return <div className="tab-list" role="tablist">{children}</div>;
}

interface TabProps {
  id: string;
  children: React.ReactNode;
}

function Tab({ id, children }: TabProps) {
  const { activeTab, setActiveTab } = useTabs();
  const isActive = activeTab === id;

  return (
    <button
      role="tab"
      aria-selected={isActive}
      onClick={() => setActiveTab(id)}
      className={isActive ? 'tab active' : 'tab'}
    >
      {children}
    </button>
  );
}

function TabPanels({ children }: { children: React.ReactNode }) {
  return <div className="tab-panels">{children}</div>;
}

interface TabPanelProps {
  id: string;
  children: React.ReactNode;
}

function TabPanel({ id, children }: TabPanelProps) {
  const { activeTab } = useTabs();
  if (activeTab !== id) return null;

  return (
    <div role="tabpanel" className="tab-panel">
      {children}
    </div>
  );
}

// Attach sub-components
Tabs.List = TabList;
Tabs.Tab = Tab;
Tabs.Panels = TabPanels;
Tabs.Panel = TabPanel;

// Usage
function App() {
  return (
    <Tabs defaultTab="profile">
      <Tabs.List>
        <Tabs.Tab id="profile">Profile</Tabs.Tab>
        <Tabs.Tab id="settings">Settings</Tabs.Tab>
        <Tabs.Tab id="notifications">Notifications</Tabs.Tab>
      </Tabs.List>

      <Tabs.Panels>
        <Tabs.Panel id="profile">
          <h2>Profile Content</h2>
        </Tabs.Panel>
        <Tabs.Panel id="settings">
          <h2>Settings Content</h2>
        </Tabs.Panel>
        <Tabs.Panel id="notifications">
          <h2>Notifications Content</h2>
        </Tabs.Panel>
      </Tabs.Panels>
    </Tabs>
  );
}

Render Props

interface MousePosition {
  x: number;
  y: number;
}

interface MouseTrackerProps {
  children: (position: MousePosition) => React.ReactNode;
}

function MouseTracker({ children }: MouseTrackerProps) {
  const [position, setPosition] = useState<MousePosition>({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (event: MouseEvent) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);

  return <>{children(position)}</>;
}

// Usage
function App() {
  return (
    <MouseTracker>
      {({ x, y }) => (
        <div>
          <h1>Move your mouse around</h1>
          <p>Position: {x}, {y}</p>
        </div>
      )}
    </MouseTracker>
  );
}

Performance Optimization and Testing

This reference covers frontend performance optimization techniques, bundle optimization, testing strategies, and accessibility best practices.

Performance Optimization

Code Splitting and Lazy Loading

React Lazy Loading

import React, { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

// Lazy load route components
const Dashboard = lazy(() => import('./pages/Dashboard'));
const UserProfile = lazy(() => import('./pages/UserProfile'));
const Settings = lazy(() => import('./pages/Settings'));
const AdminPanel = lazy(() => import('./pages/AdminPanel'));

// Loading component
const PageLoader = () => (
  <div className="page-loader">
    <div className="spinner" />
    <p>Loading...</p>
  </div>
);

function App() {
  return (
    <Suspense fallback={<PageLoader />}>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/user/:id" element={<UserProfile />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/admin" element={<AdminPanel />} />
      </Routes>
    </Suspense>
  );
}

// Preload on hover
function NavigationLink({ to, preload, children }: {
  to: string;
  preload: () => Promise<any>;
  children: React.ReactNode;
}) {
  const handleMouseEnter = () => {
    // Start preloading the component
    preload();
  };

  return (
    <Link to={to} onMouseEnter={handleMouseEnter}>
      {children}
    </Link>
  );
}

// Usage
<NavigationLink
  to="/admin"
  preload={() => import('./pages/AdminPanel')}
>
  Admin Panel
</NavigationLink>

// Named exports lazy loading
const { UserList, UserDetail } = lazy(() =>
  import('./components/Users').then(module => ({
    default: {
      UserList: module.UserList,
      UserDetail: module.UserDetail
    }
  }))
);

Vue Lazy Loading

// Router lazy loading
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => import('./views/Dashboard.vue')
    },
    {
      path: '/user/:id',
      component: () => import('./views/UserProfile.vue')
    },
    {
      path: '/admin',
      component: () => import('./views/AdminPanel.vue'),
      // Webpack magic comments for chunk naming
      // component: () => import(/* webpackChunkName: "admin" */ './views/AdminPanel.vue')
    }
  ]
});

// Component lazy loading
<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

const HeavyChart = defineAsyncComponent({
  loader: () => import('./components/HeavyChart.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorDisplay,
  delay: 200,
  timeout: 10000
});
</script>

<template>
  <Suspense>
    <template #default>
      <HeavyChart :data="chartData" />
    </template>
    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>

// Prefetch on route navigation
router.beforeEach((to, from, next) => {
  // Prefetch next likely routes
  if (to.path === '/dashboard') {
    import('./views/UserProfile.vue'); // Prefetch in background
  }
  next();
});

Bundle Optimization

Webpack Configuration

// webpack.config.js
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  mode: 'production',
  
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // Remove console.logs in production
            drop_debugger: true,
            pure_funcs: ['console.log', 'console.info'] // Remove specific console methods
          }
        }
      })
    ],
    
    // Split chunks
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        // Vendor chunk
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10
        },
        // Common chunks used by multiple routes
        common: {
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true
        },
        // Large libraries in separate chunks
        react: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: 'react',
          priority: 20
        },
        lodash: {
          test: /[\\/]node_modules[\\/]lodash[\\/]/,
          name: 'lodash',
          priority: 20
        }
      }
    },
    
    // Runtime chunk for webpack runtime
    runtimeChunk: 'single'
  },
  
  plugins: [
    // Gzip compression
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css|html|svg)$/,
      threshold: 8192,
      minRatio: 0.8
    }),
    
    // Brotli compression (better than gzip)
    new CompressionPlugin({
      algorithm: 'brotliCompress',
      test: /\.(js|css|html|svg)$/,
      compressionOptions: { level: 11 },
      threshold: 8192,
      minRatio: 0.8,
      filename: '[path][base].br'
    }),
    
    // Bundle analyzer (only in development)
    process.env.ANALYZE && new BundleAnalyzerPlugin()
  ].filter(Boolean),
  
  // Performance hints
  performance: {
    hints: 'warning',
    maxEntrypointSize: 512000, // 500kb
    maxAssetSize: 512000
  }
};

Vite Configuration

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { visualizer } from 'rollup-plugin-visualizer';
import viteCompression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    react(),
    
    // Gzip compression
    viteCompression({
      algorithm: 'gzip',
      ext: '.gz'
    }),
    
    // Brotli compression
    viteCompression({
      algorithm: 'brotliCompress',
      ext: '.br'
    }),
    
    // Bundle analyzer
    visualizer({
      open: true,
      gzipSize: true,
      brotliSize: true
    })
  ],
  
  build: {
    // Output directory
    outDir: 'dist',
    
    // Minification
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },
    
    // Rollup options
    rollupOptions: {
      output: {
        // Manual chunks
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'router': ['react-router-dom'],
          'ui-library': ['@mui/material', '@emotion/react', '@emotion/styled'],
          'charts': ['recharts', 'd3']
        }
      }
    },
    
    // Chunk size warnings
    chunkSizeWarningLimit: 500, // 500kb
    
    // Source maps (disable in production)
    sourcemap: false
  },
  
  // Optimize dependencies
  optimizeDeps: {
    include: ['react', 'react-dom', 'react-router-dom'],
    exclude: ['some-large-lib']
  }
});

Tree Shaking

// Good - Named imports (tree-shakeable)
import { map, filter, reduce } from 'lodash-es';

// Bad - Default import (includes entire library)
import _ from 'lodash';

// Good - Specific imports
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';

// Bad - Imports entire library
import * as MaterialUI from '@mui/material';

// Package.json - Mark as side-effect free
{
  "name": "my-library",
  "sideEffects": false,  // Or array of files with side effects
  "sideEffects": [
    "*.css",
    "*.scss",
    "./src/polyfills.ts"
  ]
}

// Conditional imports
if (process.env.NODE_ENV === 'development') {
  // This will be removed in production builds
  const DevTools = require('./DevTools');
  DevTools.install();
}

// Dynamic imports for conditional features
async function loadFeature() {
  if (user.hasPremium) {
    const { PremiumFeature } = await import('./PremiumFeature');
    return new PremiumFeature();
  }
  return null;
}

Image Optimization

// React - Lazy loading images
import { useState, useEffect, useRef } from 'react';

interface LazyImageProps {
  src: string;
  alt: string;
  placeholder?: string;
  className?: string;
}

function LazyImage({ src, alt, placeholder, className }: LazyImageProps) {
  const [imageSrc, setImageSrc] = useState(placeholder || '');
  const [loaded, setLoaded] = useState(false);
  const imgRef = useRef<HTMLImageElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setImageSrc(src);
            observer.disconnect();
          }
        });
      },
      { rootMargin: '50px' } // Start loading 50px before visible
    );

    if (imgRef.current) {
      observer.observe(imgRef.current);
    }

    return () => observer.disconnect();
  }, [src]);

  return (
    <img
      ref={imgRef}
      src={imageSrc}
      alt={alt}
      className={`${className} ${loaded ? 'loaded' : 'loading'}`}
      onLoad={() => setLoaded(true)}
      loading="lazy" // Native lazy loading
    />
  );
}

// Next.js Image component (optimized)
import Image from 'next/image';

function OptimizedImage() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority // Load immediately (above fold)
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
    />
  );
}

// WebP with fallback
function ResponsiveImage() {
  return (
    <picture>
      <source srcSet="/image.webp" type="image/webp" />
      <source srcSet="/image.jpg" type="image/jpeg" />
      <img src="/image.jpg" alt="Fallback" />
    </picture>
  );
}

// Responsive images
<img
  srcSet="
    /image-320w.jpg 320w,
    /image-640w.jpg 640w,
    /image-1280w.jpg 1280w
  "
  sizes="(max-width: 320px) 280px, (max-width: 640px) 600px, 1200px"
  src="/image-640w.jpg"
  alt="Responsive"
/>

Memoization and Optimization

// React.memo with custom comparison
const ExpensiveList = React.memo<{ items: Item[] }>(
  ({ items }) => {
    console.log('Rendering list');
    return (
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  },
  (prevProps, nextProps) => {
    // Custom comparison - only re-render if IDs change
    if (prevProps.items.length !== nextProps.items.length) return false;
    return prevProps.items.every((item, i) => item.id === nextProps.items[i].id);
  }
);

// useMemo for expensive computations
function DataProcessor({ data }: { data: number[] }) {
  const processedData = useMemo(() => {
    console.log('Processing data...');
    // Expensive operation
    return data
      .map(x => x * 2)
      .filter(x => x > 10)
      .reduce((acc, x) => acc + x, 0);
  }, [data]); // Only recompute when data changes

  const stats = useMemo(() => ({
    sum: processedData,
    average: processedData / data.length,
    max: Math.max(...data)
  }), [data, processedData]);

  return <div>Result: {processedData}</div>;
}

// useCallback for event handlers
function ParentComponent() {
  const [count, setCount] = useState(0);
  const [items, setItems] = useState<string[]>([]);

  // Recreated on every render - bad
  const handleClick = () => {
    console.log('Clicked');
  };

  // Same reference - good
  const handleClickMemoized = useCallback(() => {
    console.log('Clicked');
  }, []); // No dependencies

  // With dependencies
  const handleAddItem = useCallback((item: string) => {
    setItems(prev => [...prev, item]);
  }, []); // setItems is stable

  const handleLogCount = useCallback(() => {
    console.log('Count:', count);
  }, [count]); // Recreated when count changes

  return (
    <div>
      <MemoizedChild onClick={handleClickMemoized} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

const MemoizedChild = React.memo<{ onClick: () => void }>(({ onClick }) => {
  console.log('Child rendered');
  return <button onClick={onClick}>Click me</button>;
});

// Vue - computed caching
<script setup lang="ts">
import { ref, computed } from 'vue';

const items = ref<Item[]>([]);

// Cached - only recomputes when items change
const expensiveComputation = computed(() => {
  console.log('Computing...');
  return items.value
    .map(item => heavyProcess(item))
    .sort((a, b) => b.score - a.score);
});

// Computed with getter and setter
const sortedItems = computed({
  get: () => expensiveComputation.value.slice(0, 10),
  set: (newValue) => {
    items.value = newValue;
  }
});
</script>

Testing

React Component Testing

import { render, screen, fireEvent, waitFor, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter } from 'react-router-dom';
import { UserProfile } from './UserProfile';

// Test utilities
function renderWithProviders(
  ui: React.ReactElement,
  {
    queryClient = new QueryClient({
      defaultOptions: { queries: { retry: false } }
    }),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }: { children: React.ReactNode }) {
    return (
      <QueryClientProvider client={queryClient}>
        <BrowserRouter>
          {children}
        </BrowserRouter>
      </QueryClientProvider>
    );
  }

  return render(ui, { wrapper: Wrapper, ...renderOptions });
}

describe('UserProfile', () => {
  const mockUser = {
    id: '1',
    name: 'John Doe',
    email: 'john@example.com',
    role: 'admin'
  };

  beforeEach(() => {
    // Reset mocks
    jest.clearAllMocks();
  });

  it('renders user information correctly', () => {
    renderWithProviders(<UserProfile user={mockUser} />);

    expect(screen.getByText(mockUser.name)).toBeInTheDocument();
    expect(screen.getByText(mockUser.email)).toBeInTheDocument();
    expect(screen.getByRole('heading', { name: mockUser.name })).toBeInTheDocument();
  });

  it('handles user interactions', async () => {
    const handleEdit = jest.fn();
    const user = userEvent.setup();

    renderWithProviders(
      <UserProfile user={mockUser} onEdit={handleEdit} />
    );

    const editButton = screen.getByRole('button', { name: /edit/i });
    await user.click(editButton);

    expect(handleEdit).toHaveBeenCalledWith(mockUser);
    expect(handleEdit).toHaveBeenCalledTimes(1);
  });

  it('handles form submission', async () => {
    const handleSubmit = jest.fn();
    const user = userEvent.setup();

    renderWithProviders(<UserForm onSubmit={handleSubmit} />);

    // Fill form
    await user.type(screen.getByLabelText(/name/i), 'Jane Doe');
    await user.type(screen.getByLabelText(/email/i), 'jane@example.com');
    await user.selectOptions(screen.getByLabelText(/role/i), 'user');

    // Submit
    await user.click(screen.getByRole('button', { name: /submit/i }));

    await waitFor(() => {
      expect(handleSubmit).toHaveBeenCalledWith({
        name: 'Jane Doe',
        email: 'jane@example.com',
        role: 'user'
      });
    });
  });

  it('shows loading state', () => {
    renderWithProviders(<UserProfile loading />);
    expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
  });

  it('shows error state', () => {
    const error = new Error('Failed to load user');
    renderWithProviders(<UserProfile error={error} />);

    expect(screen.getByText(/failed to load user/i)).toBeInTheDocument();
  });

  it('fetches and displays user data', async () => {
    global.fetch = jest.fn(() =>
      Promise.resolve({
        ok: true,
        json: async () => mockUser
      })
    ) as jest.Mock;

    renderWithProviders(<UserProfileContainer userId="1" />);

    // Initial loading state
    expect(screen.getByText(/loading/i)).toBeInTheDocument();

    // Wait for data to load
    await waitFor(() => {
      expect(screen.getByText(mockUser.name)).toBeInTheDocument();
    });

    expect(fetch).toHaveBeenCalledWith('/api/users/1');
  });

  it('handles API errors', async () => {
    global.fetch = jest.fn(() =>
      Promise.reject(new Error('Network error'))
    ) as jest.Mock;

    renderWithProviders(<UserProfileContainer userId="1" />);

    await waitFor(() => {
      expect(screen.getByText(/network error/i)).toBeInTheDocument();
    });
  });

  describe('Accessibility', () => {
    it('has proper ARIA labels', () => {
      renderWithProviders(<UserProfile user={mockUser} />);

      expect(screen.getByRole('region', { name: /user profile/i })).toBeInTheDocument();
      expect(screen.getByLabelText(/user email/i)).toBeInTheDocument();
    });

    it('supports keyboard navigation', async () => {
      const handleEdit = jest.fn();
      const user = userEvent.setup();

      renderWithProviders(<UserProfile user={mockUser} onEdit={handleEdit} />);

      const editButton = screen.getByRole('button', { name: /edit/i });
      editButton.focus();
      
      expect(editButton).toHaveFocus();
      
      await user.keyboard('{Enter}');
      expect(handleEdit).toHaveBeenCalled();
    });
  });
});

// Snapshot testing
describe('UserCard snapshots', () => {
  it('matches snapshot', () => {
    const { container } = render(<UserCard user={mockUser} />);
    expect(container).toMatchSnapshot();
  });
});

Vue Component Testing

import { mount, flushPromises } from '@vue/test-utils';
import { createPinia, setActivePinia } from 'pinia';
import UserProfile from './UserProfile.vue';

describe('UserProfile.vue', () => {
  const mockUser = {
    id: '1',
    name: 'John Doe',
    email: 'john@example.com',
    role: 'admin'
  };

  beforeEach(() => {
    setActivePinia(createPinia());
  });

  it('renders user information', () => {
    const wrapper = mount(UserProfile, {
      props: { user: mockUser }
    });

    expect(wrapper.text()).toContain(mockUser.name);
    expect(wrapper.text()).toContain(mockUser.email);
    expect(wrapper.find('h2').text()).toBe(mockUser.name);
  });

  it('emits update event on edit', async () => {
    const wrapper = mount(UserProfile, {
      props: { user: mockUser }
    });

    await wrapper.find('button.edit').trigger('click');

    expect(wrapper.emitted('edit')).toBeTruthy();
    expect(wrapper.emitted('edit')?.[0]).toEqual([mockUser]);
  });

  it('handles form input', async () => {
    const wrapper = mount(UserForm);

    await wrapper.find('input[name="name"]').setValue('Jane Doe');
    await wrapper.find('input[name="email"]').setValue('jane@example.com');
    await wrapper.find('select[name="role"]').setValue('user');

    await wrapper.find('form').trigger('submit.prevent');

    expect(wrapper.emitted('submit')?.[0]).toEqual([{
      name: 'Jane Doe',
      email: 'jane@example.com',
      role: 'user'
    }]);
  });

  it('shows loading state', () => {
    const wrapper = mount(UserProfile, {
      props: { loading: true }
    });

    expect(wrapper.find('.loading-spinner').exists()).toBe(true);
  });

  it('fetches user data', async () => {
    global.fetch = jest.fn(() =>
      Promise.resolve({
        ok: true,
        json: async () => mockUser
      })
    ) as jest.Mock;

    const wrapper = mount(UserProfileContainer, {
      props: { userId: '1' }
    });

    expect(wrapper.text()).toContain('Loading');

    await flushPromises();

    expect(wrapper.text()).toContain(mockUser.name);
    expect(fetch).toHaveBeenCalledWith('/api/users/1');
  });

  it('uses composable correctly', async () => {
    const wrapper = mount({
      template: '<div>{{ displayName }}</div>',
      setup() {
        const { user, displayName, fetchUser } = useUser();
        fetchUser('1');
        return { displayName };
      }
    });

    await flushPromises();

    expect(wrapper.text()).toContain('John Doe');
  });

  describe('Slots', () => {
    it('renders default slot', () => {
      const wrapper = mount(UserCard, {
        props: { user: mockUser },
        slots: {
          default: '<p>Custom content</p>'
        }
      });

      expect(wrapper.html()).toContain('<p>Custom content</p>');
    });

    it('renders named slots', () => {
      const wrapper = mount(UserCard, {
        props: { user: mockUser },
        slots: {
          header: '<h1>Custom Header</h1>',
          footer: '<button>Custom Button</button>'
        }
      });

      expect(wrapper.find('h1').text()).toBe('Custom Header');
      expect(wrapper.find('button').text()).toBe('Custom Button');
    });

    it('passes slot props', () => {
      const wrapper = mount(UserList, {
        props: { users: [mockUser] },
        slots: {
          item: `
            <template #item="{ user, index }">
              <div>{{ index }}: {{ user.name }}</div>
            </template>
          `
        }
      });

      expect(wrapper.text()).toContain('0: John Doe');
    });
  });
});

E2E Testing with Playwright

import { test, expect } from '@playwright/test';

test.describe('User Profile', () => {
  test.beforeEach(async ({ page }) => {
    // Login before each test
    await page.goto('/login');
    await page.fill('[name="email"]', 'test@example.com');
    await page.fill('[name="password"]', 'password123');
    await page.click('button[type="submit"]');
    await expect(page).toHaveURL('/dashboard');
  });

  test('should display user profile', async ({ page }) => {
    await page.goto('/profile');

    await expect(page.locator('h1')).toHaveText('John Doe');
    await expect(page.locator('[data-testid="email"]')).toHaveText('john@example.com');
  });

  test('should edit user profile', async ({ page }) => {
    await page.goto('/profile');

    await page.click('button:has-text("Edit")');
    await page.fill('[name="name"]', 'Jane Doe');
    await page.fill('[name="email"]', 'jane@example.com');
    await page.click('button:has-text("Save")');

    await expect(page.locator('.success-message')).toBeVisible();
    await expect(page.locator('h1')).toHaveText('Jane Doe');
  });

  test('should handle form validation', async ({ page }) => {
    await page.goto('/profile/edit');

    await page.fill('[name="email"]', 'invalid-email');
    await page.click('button:has-text("Save")');

    await expect(page.locator('.error-message')).toContainText('Invalid email');
  });

  test('should load data progressively', async ({ page }) => {
    await page.goto('/users');

    // Initial load
    await expect(page.locator('.user-card')).toHaveCount(20);

    // Scroll to bottom
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));

    // Wait for more items
    await expect(page.locator('.user-card')).toHaveCount(40);
  });

  test('should handle API errors', async ({ page }) => {
    // Intercept API call and return error
    await page.route('/api/users/*', route =>
      route.fulfill({
        status: 500,
        body: JSON.stringify({ error: 'Server error' })
      })
    );

    await page.goto('/users');

    await expect(page.locator('.error-message')).toContainText('Server error');
  });

  test('should work offline', async ({ page, context }) => {
    await page.goto('/dashboard');

    // Go offline
    await context.setOffline(true);

    // Should show cached data
    await expect(page.locator('.offline-indicator')).toBeVisible();
    await expect(page.locator('.dashboard-content')).toBeVisible();

    // Go back online
    await context.setOffline(false);
    await expect(page.locator('.offline-indicator')).not.toBeVisible();
  });
});

// Visual regression testing
test('visual regression', async ({ page }) => {
  await page.goto('/dashboard');
  await expect(page).toHaveScreenshot('dashboard.png');
});

// Performance testing
test('page performance', async ({ page }) => {
  await page.goto('/dashboard');

  const performanceMetrics = await page.evaluate(() => {
    const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
    return {
      domContentLoaded: navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart,
      loadComplete: navigation.loadEventEnd - navigation.loadEventStart,
      firstPaint: performance.getEntriesByType('paint')[0]?.startTime
    };
  });

  expect(performanceMetrics.domContentLoaded).toBeLessThan(1000); // < 1s
  expect(performanceMetrics.loadComplete).toBeLessThan(2000); // < 2s
});

Accessibility

ARIA and Semantic HTML

// React accessible component
function AccessibleModal({ isOpen, onClose, title, children }: {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
}) {
  const modalRef = useRef<HTMLDivElement>(null);
  const previousFocus = useRef<HTMLElement | null>(null);

  useEffect(() => {
    if (isOpen) {
      previousFocus.current = document.activeElement as HTMLElement;
      modalRef.current?.focus();

      // Trap focus
      const handleTabKey = (e: KeyboardEvent) => {
        if (e.key === 'Tab' && modalRef.current) {
          const focusableElements = modalRef.current.querySelectorAll(
            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
          );
          const first = focusableElements[0] as HTMLElement;
          const last = focusableElements[focusableElements.length - 1] as HTMLElement;

          if (e.shiftKey && document.activeElement === first) {
            e.preventDefault();
            last.focus();
          } else if (!e.shiftKey && document.activeElement === last) {
            e.preventDefault();
            first.focus();
          }
        }

        if (e.key === 'Escape') {
          onClose();
        }
      };

      document.addEventListener('keydown', handleTabKey);
      return () => {
        document.removeEventListener('keydown', handleTabKey);
        previousFocus.current?.focus();
      };
    }
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div
      className="modal-overlay"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
      onClick={onClose}
    >
      <div
        ref={modalRef}
        className="modal-content"
        onClick={(e) => e.stopPropagation()}
        tabIndex={-1}
      >
        <header className="modal-header">
          <h2 id="modal-title">{title}</h2>
          <button
            onClick={onClose}
            aria-label="Close modal"
            className="close-button"
          >
            ×
          </button>
        </header>
        <div className="modal-body">
          {children}
        </div>
      </div>
    </div>
  );
}

// Accessible form
function AccessibleForm() {
  const [errors, setErrors] = useState<Record<string, string>>({});

  return (
    <form onSubmit={handleSubmit} noValidate>
      <div className="form-group">
        <label htmlFor="email">
          Email <span aria-label="required">*</span>
        </label>
        <input
          id="email"
          type="email"
          aria-required="true"
          aria-invalid={!!errors.email}
          aria-describedby={errors.email ? 'email-error' : undefined}
        />
        {errors.email && (
          <span id="email-error" role="alert" className="error">
            {errors.email}
          </span>
        )}
      </div>

      <button type="submit" aria-busy={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
}

// Skip to content link
function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <a href="#main-content" className="skip-link">
        Skip to main content
      </a>
      <nav aria-label="Main navigation">
        {/* Navigation links */}
      </nav>
      <main id="main-content" tabIndex={-1}>
        {children}
      </main>
    </>
  );
}

// Accessible tabs
function AccessibleTabs() {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <div>
      <div role="tablist" aria-label="Content tabs">
        {tabs.map((tab, index) => (
          <button
            key={tab.id}
            role="tab"
            aria-selected={activeTab === index}
            aria-controls={`panel-${tab.id}`}
            id={`tab-${tab.id}`}
            tabIndex={activeTab === index ? 0 : -1}
            onClick={() => setActiveTab(index)}
          >
            {tab.label}
          </button>
        ))}
      </div>
      {tabs.map((tab, index) => (
        <div
          key={tab.id}
          role="tabpanel"
          id={`panel-${tab.id}`}
          aria-labelledby={`tab-${tab.id}`}
          hidden={activeTab !== index}
        >
          {tab.content}
        </div>
      ))}
    </div>
  );
}

Screen Reader Testing

# Testing with screen readers
# - NVDA (Windows - free)
# - JAWS (Windows - commercial)
# - VoiceOver (macOS - built-in, Cmd+F5)
# - TalkBack (Android - built-in)
# - Orca (Linux - free)

# Automated accessibility testing
npm install --save-dev @axe-core/react
npm install --save-dev jest-axe

// Axe testing
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

test('should have no accessibility violations', async () => {
  const { container } = render(<UserProfile user={mockUser} />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

This reference provides comprehensive performance optimization, testing strategies, and accessibility best practices for frontend development.

React Development

Functional Components and Hooks

Modern React Component:

import React, { useState, useEffect, useMemo, useCallback } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
}

interface UserProfileProps {
  userId: string;
  onUpdate?: (user: User) => void;
}

export const UserProfile: React.FC<UserProfileProps> = ({ userId, onUpdate }) => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  // Fetch user data
  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) throw new Error('Failed to fetch user');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err instanceof Error ? err : new Error('Unknown error'));
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [userId]);

  // Memoized computed value
  const displayName = useMemo(() => {
    if (!user) return '';
    return `${user.name} (${user.email})`;
  }, [user]);

  // Memoized callback
  const handleUpdate = useCallback((updates: Partial<User>) => {
    if (!user) return;
    
    const updatedUser = { ...user, ...updates };
    setUser(updatedUser);
    onUpdate?.(updatedUser);
  }, [user, onUpdate]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!user) return <div>User not found</div>;

  return (
    <div className="user-profile">
      <h2>{displayName}</h2>
      <button onClick={() => handleUpdate({ name: 'Updated Name' })}>
        Update Name
      </button>
    </div>
  );
};

Custom Hooks:

// useAsync - Generic async operation hook
function useAsync<T>(
  asyncFunction: () => Promise<T>,
  dependencies: React.DependencyList = []
) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    let cancelled = false;

    const execute = async () => {
      try {
        setLoading(true);
        setError(null);
        const result = await asyncFunction();
        if (!cancelled) {
          setData(result);
        }
      } catch (err) {
        if (!cancelled) {
          setError(err instanceof Error ? err : new Error('Unknown error'));
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    };

    execute();

    return () => {
      cancelled = true;
    };
  }, dependencies);

  return { data, loading, error };
}

// useDebounce - Debounce value updates
function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

// useLocalStorage - Sync state with localStorage
function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue] as const;
}

// Usage
function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearch = useDebounce(searchTerm, 500);

  const { data: results, loading } = useAsync(
    () => fetch(`/api/search?q=${debouncedSearch}`).then(r => r.json()),
    [debouncedSearch]
  );

  return (
    <div>
      <input
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      {loading && <div>Searching...</div>}
      {results && <ResultsList results={results} />}
    </div>
  );
}

Context API for State Management:

import React, { createContext, useContext, useReducer } from 'react';

// Types
interface Todo {
  id: string;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
}

type TodoAction =
  | { type: 'ADD_TODO'; payload: { text: string } }
  | { type: 'TOGGLE_TODO'; payload: { id: string } }
  | { type: 'DELETE_TODO'; payload: { id: string } }
  | { type: 'LOAD_TODOS'; payload: { todos: Todo[] } };

// Reducer
function todoReducer(state: TodoState, action: TodoAction): TodoState {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        todos: [
          ...state.todos,
          {
            id: Date.now().toString(),
            text: action.payload.text,
            completed: false
          }
        ]
      };
    
    case 'TOGGLE_TODO':
      return {
        todos: state.todos.map(todo =>
          todo.id === action.payload.id
            ? { ...todo, completed: !todo.completed }
            : todo
        )
      };
    
    case 'DELETE_TODO':
      return {
        todos: state.todos.filter(todo => todo.id !== action.payload.id)
      };
    
    case 'LOAD_TODOS':
      return {
        todos: action.payload.todos
      };
    
    default:
      return state;
  }
}

// Context
const TodoContext = createContext<{
  state: TodoState;
  dispatch: React.Dispatch<TodoAction>;
} | undefined>(undefined);

// Provider
export function TodoProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(todoReducer, { todos: [] });

  return (
    <TodoContext.Provider value={{ state, dispatch }}>
      {children}
    </TodoContext.Provider>
  );
}

// Hook
export function useTodos() {
  const context = useContext(TodoContext);
  if (!context) {
    throw new Error('useTodos must be used within TodoProvider');
  }

  const { state, dispatch } = context;

  const addTodo = (text: string) => {
    dispatch({ type: 'ADD_TODO', payload: { text } });
  };

  const toggleTodo = (id: string) => {
    dispatch({ type: 'TOGGLE_TODO', payload: { id } });
  };

  const deleteTodo = (id: string) => {
    dispatch({ type: 'DELETE_TODO', payload: { id } });
  };

  return {
    todos: state.todos,
    addTodo,
    toggleTodo,
    deleteTodo
  };
}

// Usage
function TodoList() {
  const { todos, toggleTodo, deleteTodo } = useTodos();

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => toggleTodo(todo.id)}
          />
          <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            {todo.text}
          </span>
          <button onClick={() => deleteTodo(todo.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

function AddTodo() {
  const [text, setText] = useState('');
  const { addTodo } = useTodos();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (text.trim()) {
      addTodo(text);
      setText('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Add todo..."
      />
      <button type="submit">Add</button>
    </form>
  );
}

Performance Optimization

React.memo and useMemo:

import React, { memo, useMemo } from 'react';

// Expensive computation
function calculatePrimeNumbers(max: number): number[] {
  const primes: number[] = [];
  for (let i = 2; i <= max; i++) {
    let isPrime = true;
    for (let j = 2; j <= Math.sqrt(i); j++) {
      if (i % j === 0) {
        isPrime = false;
        break;
      }
    }
    if (isPrime) primes.push(i);
  }
  return primes;
}

// Memoized component
interface PrimeListProps {
  max: number;
  filter?: string;
}

export const PrimeList = memo<PrimeListProps>(({ max, filter }) => {
  // Only recalculate when max changes
  const primes = useMemo(() => calculatePrimeNumbers(max), [max]);

  // Filter results (cheap operation, no need to memoize)
  const filtered = filter
    ? primes.filter(p => p.toString().includes(filter))
    : primes;

  return (
    <div>
      <p>Found {filtered.length} prime numbers</p>
      <ul>
        {filtered.map(prime => (
          <li key={prime}>{prime}</li>
        ))}
      </ul>
    </div>
  );
}, (prevProps, nextProps) => {
  // Custom comparison function
  return prevProps.max === nextProps.max && prevProps.filter === nextProps.filter;
});

Code Splitting with React.lazy:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// Lazy load components
const Dashboard = lazy(() => import('./pages/Dashboard'));
const UserProfile = lazy(() => import('./pages/UserProfile'));
const Settings = lazy(() => import('./pages/Settings'));

// Loading fallback
const LoadingSpinner = () => (
  <div className="loading-spinner">Loading...</div>
);

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<LoadingSpinner />}>
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/user/:id" element={<UserProfile />} />
          <Route path="/settings" element={<Settings />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

// Preload on hover
function NavLink({ to, children }: { to: string; children: React.ReactNode }) {
  const handleMouseEnter = () => {
    // Preload the component
    if (to === '/user/:id') {
      import('./pages/UserProfile');
    }
  };

  return (
    <a href={to} onMouseEnter={handleMouseEnter}>
      {children}
    </a>
  );
}

React Patterns and Advanced Techniques

This reference provides advanced React patterns, hooks patterns, and architectural approaches for building scalable React applications.

Custom Hooks Patterns

Data Fetching Hook

import { useState, useEffect, useCallback } from 'react';

interface UseFetchOptions<T> {
  initialData?: T;
  onSuccess?: (data: T) => void;
  onError?: (error: Error) => void;
  dependencies?: React.DependencyList;
}

interface UseFetchReturn<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
}

function useFetch<T>(
  url: string,
  options: UseFetchOptions<T> = {}
): UseFetchReturn<T> {
  const [data, setData] = useState<T | null>(options.initialData || null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  const fetchData = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);
      
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      const result = await response.json();
      setData(result);
      options.onSuccess?.(result);
    } catch (err) {
      const error = err instanceof Error ? err : new Error('Unknown error');
      setError(error);
      options.onError?.(error);
    } finally {
      setLoading(false);
    }
  }, [url, ...(options.dependencies || [])]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return { data, loading, error, refetch: fetchData };
}

// Usage
function UserProfile({ userId }: { userId: string }) {
  const { data: user, loading, error, refetch } = useFetch<User>(
    `/api/users/${userId}`,
    {
      onSuccess: (user) => console.log('User loaded:', user),
      dependencies: [userId]
    }
  );

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!user) return <div>User not found</div>;

  return (
    <div>
      <h2>{user.name}</h2>
      <button onClick={refetch}>Refresh</button>
    </div>
  );
}

Form Management Hook

import { useState, useCallback, ChangeEvent } from 'react';

interface FormValidation<T> {
  [K in keyof T]?: (value: T[K]) => string | undefined;
}

interface UseFormOptions<T> {
  initialValues: T;
  validations?: FormValidation<T>;
  onSubmit: (values: T) => void | Promise<void>;
}

interface UseFormReturn<T> {
  values: T;
  errors: Partial<Record<keyof T, string>>;
  touched: Partial<Record<keyof T, boolean>>;
  isSubmitting: boolean;
  handleChange: (name: keyof T) => (e: ChangeEvent<HTMLInputElement>) => void;
  handleBlur: (name: keyof T) => () => void;
  handleSubmit: (e: React.FormEvent) => Promise<void>;
  setFieldValue: (name: keyof T, value: T[keyof T]) => void;
  resetForm: () => void;
}

function useForm<T extends Record<string, any>>({
  initialValues,
  validations = {},
  onSubmit
}: UseFormOptions<T>): UseFormReturn<T> {
  const [values, setValues] = useState<T>(initialValues);
  const [errors, setErrors] = useState<Partial<Record<keyof T, string>>>({});
  const [touched, setTouched] = useState<Partial<Record<keyof T, boolean>>>({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const validateField = useCallback((name: keyof T, value: T[keyof T]): string | undefined => {
    const validator = validations[name];
    return validator ? validator(value) : undefined;
  }, [validations]);

  const handleChange = useCallback((name: keyof T) => (e: ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value as T[keyof T];
    setValues(prev => ({ ...prev, [name]: value }));

    // Validate on change if field has been touched
    if (touched[name]) {
      const error = validateField(name, value);
      setErrors(prev => ({ ...prev, [name]: error }));
    }
  }, [touched, validateField]);

  const handleBlur = useCallback((name: keyof T) => () => {
    setTouched(prev => ({ ...prev, [name]: true }));
    
    // Validate on blur
    const error = validateField(name, values[name]);
    setErrors(prev => ({ ...prev, [name]: error }));
  }, [values, validateField]);

  const handleSubmit = useCallback(async (e: React.FormEvent) => {
    e.preventDefault();
    
    // Mark all fields as touched
    const allTouched = Object.keys(values).reduce((acc, key) => {
      acc[key as keyof T] = true;
      return acc;
    }, {} as Record<keyof T, boolean>);
    setTouched(allTouched);

    // Validate all fields
    const allErrors: Partial<Record<keyof T, string>> = {};
    let hasErrors = false;

    for (const key in values) {
      const error = validateField(key as keyof T, values[key]);
      if (error) {
        allErrors[key as keyof T] = error;
        hasErrors = true;
      }
    }

    setErrors(allErrors);

    if (!hasErrors) {
      setIsSubmitting(true);
      try {
        await onSubmit(values);
      } finally {
        setIsSubmitting(false);
      }
    }
  }, [values, validateField, onSubmit]);

  const setFieldValue = useCallback((name: keyof T, value: T[keyof T]) => {
    setValues(prev => ({ ...prev, [name]: value }));
  }, []);

  const resetForm = useCallback(() => {
    setValues(initialValues);
    setErrors({});
    setTouched({});
    setIsSubmitting(false);
  }, [initialValues]);

  return {
    values,
    errors,
    touched,
    isSubmitting,
    handleChange,
    handleBlur,
    handleSubmit,
    setFieldValue,
    resetForm
  };
}

// Usage
interface LoginForm {
  email: string;
  password: string;
}

function LoginPage() {
  const {
    values,
    errors,
    touched,
    isSubmitting,
    handleChange,
    handleBlur,
    handleSubmit
  } = useForm<LoginForm>({
    initialValues: {
      email: '',
      password: ''
    },
    validations: {
      email: (value) => {
        if (!value) return 'Email is required';
        if (!/\S+@\S+\.\S+/.test(value)) return 'Email is invalid';
        return undefined;
      },
      password: (value) => {
        if (!value) return 'Password is required';
        if (value.length < 8) return 'Password must be at least 8 characters';
        return undefined;
      }
    },
    onSubmit: async (values) => {
      await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(values)
      });
    }
  });

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <input
          type="email"
          name="email"
          value={values.email}
          onChange={handleChange('email')}
          onBlur={handleBlur('email')}
          placeholder="Email"
        />
        {touched.email && errors.email && (
          <span className="error">{errors.email}</span>
        )}
      </div>

      <div>
        <input
          type="password"
          name="password"
          value={values.password}
          onChange={handleChange('password')}
          onBlur={handleBlur('password')}
          placeholder="Password"
        />
        {touched.password && errors.password && (
          <span className="error">{errors.password}</span>
        )}
      </div>

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Logging in...' : 'Login'}
      </button>
    </form>
  );
}

Intersection Observer Hook

import { useEffect, useRef, useState } from 'react';

interface UseIntersectionObserverOptions extends IntersectionObserverInit {
  freezeOnceVisible?: boolean;
}

function useIntersectionObserver(
  options: UseIntersectionObserverOptions = {}
): [React.RefObject<HTMLDivElement>, boolean] {
  const { freezeOnceVisible = false, ...observerOptions } = options;
  const elementRef = useRef<HTMLDivElement>(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const element = elementRef.current;
    if (!element) return;

    // Don't observe if already visible and freeze is enabled
    if (freezeOnceVisible && isVisible) return;

    const observer = new IntersectionObserver(([entry]) => {
      setIsVisible(entry.isIntersecting);
    }, observerOptions);

    observer.observe(element);

    return () => {
      observer.disconnect();
    };
  }, [isVisible, freezeOnceVisible, observerOptions]);

  return [elementRef, isVisible];
}

// Lazy Loading Images
function LazyImage({ src, alt }: { src: string; alt: string }) {
  const [ref, isVisible] = useIntersectionObserver({
    threshold: 0.1,
    freezeOnceVisible: true
  });

  return (
    <div ref={ref} style={{ minHeight: '200px' }}>
      {isVisible && <img src={src} alt={alt} />}
    </div>
  );
}

// Infinite Scroll
function InfiniteScrollList() {
  const [items, setItems] = useState<string[]>([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  
  const [sentinelRef, isVisible] = useIntersectionObserver({
    threshold: 0.5
  });

  useEffect(() => {
    if (isVisible && !loading) {
      setLoading(true);
      // Fetch more data
      fetch(`/api/items?page=${page}`)
        .then(r => r.json())
        .then(newItems => {
          setItems(prev => [...prev, ...newItems]);
          setPage(prev => prev + 1);
        })
        .finally(() => setLoading(false));
    }
  }, [isVisible, loading, page]);

  return (
    <div>
      {items.map(item => (
        <div key={item}>{item}</div>
      ))}
      <div ref={sentinelRef}>
        {loading && <div>Loading more...</div>}
      </div>
    </div>
  );
}

Previous Value Hook

import { useEffect, useRef } from 'react';

function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T>();

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
}

// Usage - Compare current and previous values
function Counter() {
  const [count, setCount] = useState(0);
  const previousCount = usePrevious(count);

  return (
    <div>
      <p>Current: {count}</p>
      <p>Previous: {previousCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Usage - Detect changes
function SearchResults({ query }: { query: string }) {
  const [results, setResults] = useState([]);
  const previousQuery = usePrevious(query);

  useEffect(() => {
    if (query !== previousQuery) {
      console.log(`Query changed from "${previousQuery}" to "${query}"`);
      // Fetch new results
      fetchResults(query).then(setResults);
    }
  }, [query, previousQuery]);

  return <ResultsList results={results} />;
}

Component Patterns

Higher-Order Components (HOC)

import React, { ComponentType } from 'react';

// WithLoading HOC
interface WithLoadingProps {
  loading: boolean;
}

function withLoading<P extends object>(
  Component: ComponentType<P>
): ComponentType<P & WithLoadingProps> {
  return function WithLoadingComponent({ loading, ...props }: WithLoadingProps & P) {
    if (loading) {
      return <div>Loading...</div>;
    }
    return <Component {...(props as P)} />;
  };
}

// Usage
interface UserListProps {
  users: User[];
}

const UserList: React.FC<UserListProps> = ({ users }) => (
  <ul>
    {users.map(user => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

const UserListWithLoading = withLoading(UserList);

function App() {
  const { data: users, loading } = useFetch<User[]>('/api/users');

  return <UserListWithLoading users={users || []} loading={loading} />;
}

// WithAuth HOC
interface WithAuthProps {
  user: User | null;
}

function withAuth<P extends object>(
  Component: ComponentType<P & WithAuthProps>
): ComponentType<P> {
  return function WithAuthComponent(props: P) {
    const { user, loading } = useAuth(); // Custom auth hook

    if (loading) return <div>Authenticating...</div>;
    if (!user) return <Navigate to="/login" />;

    return <Component {...props} user={user} />;
  };
}

// Protected component
const Dashboard: React.FC<WithAuthProps> = ({ user }) => (
  <div>
    <h1>Welcome, {user.name}!</h1>
  </div>
);

const ProtectedDashboard = withAuth(Dashboard);

Controlled vs Uncontrolled Components

// Controlled Component
function ControlledInput() {
  const [value, setValue] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Submitted:', value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Controlled input"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

// Uncontrolled Component
function UncontrolledInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Submitted:', inputRef.current?.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        ref={inputRef}
        defaultValue=""
        placeholder="Uncontrolled input"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

// Hybrid - Controlled with Ref
function HybridInput() {
  const [value, setValue] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);

  const handleClear = () => {
    setValue('');
    inputRef.current?.focus();
  };

  return (
    <div>
      <input
        ref={inputRef}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Hybrid input"
      />
      <button onClick={handleClear}>Clear and Focus</button>
    </div>
  );
}

Container/Presenter Pattern

// Presenter Component (Dumb/Presentational)
interface UserCardProps {
  user: User;
  onEdit: () => void;
  onDelete: () => void;
}

export const UserCard: React.FC<UserCardProps> = ({ user, onEdit, onDelete }) => (
  <div className="user-card">
    <img src={user.avatar} alt={user.name} />
    <h3>{user.name}</h3>
    <p>{user.email}</p>
    <div className="actions">
      <button onClick={onEdit}>Edit</button>
      <button onClick={onDelete}>Delete</button>
    </div>
  </div>
);

// Container Component (Smart/Container)
export const UserCardContainer: React.FC<{ userId: string }> = ({ userId }) => {
  const { data: user, loading, error } = useFetch<User>(`/api/users/${userId}`);
  const [isEditing, setIsEditing] = useState(false);

  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleDelete = async () => {
    if (confirm('Are you sure?')) {
      await fetch(`/api/users/${userId}`, { method: 'DELETE' });
    }
  };

  if (loading) return <Skeleton />;
  if (error) return <ErrorMessage error={error} />;
  if (!user) return <NotFound />;

  if (isEditing) {
    return <UserEditForm user={user} onCancel={() => setIsEditing(false)} />;
  }

  return <UserCard user={user} onEdit={handleEdit} onDelete={handleDelete} />;
};

Portal Pattern

import { createPortal } from 'react-dom';
import { useEffect, useState } from 'react';

// Modal Component
interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
}

export const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
    }

    return () => {
      document.body.style.overflow = 'unset';
    };
  }, [isOpen]);

  if (!mounted || !isOpen) return null;

  return createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>×</button>
        {children}
      </div>
    </div>,
    document.body
  );
};

// Usage
function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <h2>Modal Title</h2>
        <p>Modal content goes here</p>
      </Modal>
    </div>
  );
}

// Tooltip with Portal
export const Tooltip: React.FC<{
  children: React.ReactNode;
  content: string;
}> = ({ children, content }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const triggerRef = useRef<HTMLDivElement>(null);

  const handleMouseEnter = () => {
    if (triggerRef.current) {
      const rect = triggerRef.current.getBoundingClientRect();
      setPosition({
        x: rect.left + rect.width / 2,
        y: rect.top
      });
      setIsVisible(true);
    }
  };

  return (
    <>
      <div
        ref={triggerRef}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={() => setIsVisible(false)}
      >
        {children}
      </div>
      {isVisible && createPortal(
        <div
          className="tooltip"
          style={{
            position: 'fixed',
            left: position.x,
            top: position.y,
            transform: 'translate(-50%, -100%)'
          }}
        >
          {content}
        </div>,
        document.body
      )}
    </>
  );
};

Advanced State Management

Context with Reducer

import React, { createContext, useContext, useReducer, useCallback } from 'react';

// Types
interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}

interface CartState {
  items: CartItem[];
  total: number;
}

type CartAction =
  | { type: 'ADD_ITEM'; payload: Omit<CartItem, 'quantity'> }
  | { type: 'REMOVE_ITEM'; payload: { id: string } }
  | { type: 'UPDATE_QUANTITY'; payload: { id: string; quantity: number } }
  | { type: 'CLEAR_CART' };

// Reducer
function cartReducer(state: CartState, action: CartAction): CartState {
  switch (action.type) {
    case 'ADD_ITEM': {
      const existingIndex = state.items.findIndex(
        item => item.id === action.payload.id
      );

      let newItems: CartItem[];
      if (existingIndex >= 0) {
        newItems = [...state.items];
        newItems[existingIndex].quantity += 1;
      } else {
        newItems = [...state.items, { ...action.payload, quantity: 1 }];
      }

      return {
        items: newItems,
        total: calculateTotal(newItems)
      };
    }

    case 'REMOVE_ITEM': {
      const newItems = state.items.filter(item => item.id !== action.payload.id);
      return {
        items: newItems,
        total: calculateTotal(newItems)
      };
    }

    case 'UPDATE_QUANTITY': {
      const newItems = state.items.map(item =>
        item.id === action.payload.id
          ? { ...item, quantity: action.payload.quantity }
          : item
      );
      return {
        items: newItems,
        total: calculateTotal(newItems)
      };
    }

    case 'CLEAR_CART':
      return { items: [], total: 0 };

    default:
      return state;
  }
}

function calculateTotal(items: CartItem[]): number {
  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
}

// Context
interface CartContextValue {
  state: CartState;
  addItem: (item: Omit<CartItem, 'quantity'>) => void;
  removeItem: (id: string) => void;
  updateQuantity: (id: string, quantity: number) => void;
  clearCart: () => void;
}

const CartContext = createContext<CartContextValue | undefined>(undefined);

// Provider
export function CartProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(cartReducer, { items: [], total: 0 });

  const addItem = useCallback((item: Omit<CartItem, 'quantity'>) => {
    dispatch({ type: 'ADD_ITEM', payload: item });
  }, []);

  const removeItem = useCallback((id: string) => {
    dispatch({ type: 'REMOVE_ITEM', payload: { id } });
  }, []);

  const updateQuantity = useCallback((id: string, quantity: number) => {
    if (quantity <= 0) {
      dispatch({ type: 'REMOVE_ITEM', payload: { id } });
    } else {
      dispatch({ type: 'UPDATE_QUANTITY', payload: { id, quantity } });
    }
  }, []);

  const clearCart = useCallback(() => {
    dispatch({ type: 'CLEAR_CART' });
  }, []);

  return (
    <CartContext.Provider
      value={{ state, addItem, removeItem, updateQuantity, clearCart }}
    >
      {children}
    </CartContext.Provider>
  );
}

// Hook
export function useCart() {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error('useCart must be used within CartProvider');
  }
  return context;
}

// Usage
function ProductCard({ product }: { product: Product }) {
  const { addItem } = useCart();

  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button onClick={() => addItem(product)}>Add to Cart</button>
    </div>
  );
}

function CartSummary() {
  const { state, removeItem, updateQuantity, clearCart } = useCart();

  return (
    <div className="cart-summary">
      <h2>Shopping Cart</h2>
      {state.items.map(item => (
        <div key={item.id} className="cart-item">
          <span>{item.name}</span>
          <input
            type="number"
            value={item.quantity}
            onChange={(e) => updateQuantity(item.id, parseInt(e.target.value))}
          />
          <span>${item.price * item.quantity}</span>
          <button onClick={() => removeItem(item.id)}>Remove</button>
        </div>
      ))}
      <div className="cart-total">
        <strong>Total: ${state.total}</strong>
      </div>
      <button onClick={clearCart}>Clear Cart</button>
    </div>
  );
}

Error Boundaries

import React, { Component, ErrorInfo, ReactNode } from 'react';

interface Props {
  children: ReactNode;
  fallback?: ReactNode;
  onError?: (error: Error, errorInfo: ErrorInfo) => void;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      hasError: false,
      error: null
    };
  }

  static getDerivedStateFromError(error: Error): State {
    return {
      hasError: true,
      error
    };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('Error caught by boundary:', error, errorInfo);
    this.props.onError?.(error, errorInfo);
    
    // Send to error tracking service
    // logErrorToService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      if (this.props.fallback) {
        return this.props.fallback;
      }

      return (
        <div className="error-boundary">
          <h2>Something went wrong</h2>
          <details>
            <summary>Error details</summary>
            <pre>{this.state.error?.message}</pre>
          </details>
          <button onClick={() => this.setState({ hasError: false, error: null })}>
            Try again
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

// Usage
function App() {
  return (
    <ErrorBoundary
      fallback={<div>Custom error UI</div>}
      onError={(error, info) => {
        // Log to monitoring service
        console.error('Boundary caught:', error);
      }}
    >
      <UserProfile userId="123" />
    </ErrorBoundary>
  );
}

// Functional wrapper
function withErrorBoundary<P extends object>(
  Component: ComponentType<P>,
  fallback?: ReactNode
): ComponentType<P> {
  return function WithErrorBoundaryComponent(props: P) {
    return (
      <ErrorBoundary fallback={fallback}>
        <Component {...props} />
      </ErrorBoundary>
    );
  };
}

const SafeUserProfile = withErrorBoundary(UserProfile);

Performance Optimization

Virtual Scrolling

import React, { useState, useRef, useEffect } from 'react';

interface VirtualScrollProps<T> {
  items: T[];
  itemHeight: number;
  containerHeight: number;
  renderItem: (item: T, index: number) => React.ReactNode;
  overscan?: number;
}

function VirtualScroll<T>({
  items,
  itemHeight,
  containerHeight,
  renderItem,
  overscan = 3
}: VirtualScrollProps<T>) {
  const [scrollTop, setScrollTop] = useState(0);
  const containerRef = useRef<HTMLDivElement>(null);

  const totalHeight = items.length * itemHeight;
  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
  const endIndex = Math.min(
    items.length - 1,
    Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
  );

  const visibleItems = items.slice(startIndex, endIndex + 1);
  const offsetY = startIndex * itemHeight;

  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
    setScrollTop(e.currentTarget.scrollTop);
  };

  return (
    <div
      ref={containerRef}
      onScroll={handleScroll}
      style={{
        height: containerHeight,
        overflow: 'auto',
        position: 'relative'
      }}
    >
      <div style={{ height: totalHeight }}>
        <div style={{ transform: `translateY(${offsetY}px)` }}>
          {visibleItems.map((item, index) =>
            renderItem(item, startIndex + index)
          )}
        </div>
      </div>
    </div>
  );
}

// Usage
function LargeList() {
  const items = Array.from({ length: 10000 }, (_, i) => ({
    id: i,
    name: `Item ${i}`
  }));

  return (
    <VirtualScroll
      items={items}
      itemHeight={50}
      containerHeight={600}
      renderItem={(item) => (
        <div
          key={item.id}
          style={{
            height: 50,
            borderBottom: '1px solid #ccc',
            padding: '10px'
          }}
        >
          {item.name}
        </div>
      )}
    />
  );
}

Memoization Strategies

// Expensive computation
const ExpensiveComponent = React.memo<{ data: ComplexData[] }>(
  ({ data }) => {
    const processedData = useMemo(() => {
      console.log('Processing data...');
      return data.map(item => ({
        ...item,
        computed: expensiveCalculation(item)
      }));
    }, [data]);

    return (
      <div>
        {processedData.map(item => (
          <div key={item.id}>{item.computed}</div>
        ))}
      </div>
    );
  },
  (prevProps, nextProps) => {
    // Custom comparison - only re-render if data length or IDs change
    return (
      prevProps.data.length === nextProps.data.length &&
      prevProps.data.every((item, i) => item.id === nextProps.data[i].id)
    );
  }
);

// Callback memoization
function ParentComponent() {
  const [count, setCount] = useState(0);
  const [items, setItems] = useState<string[]>([]);

  // Without useCallback - creates new function on every render
  const handleBadClick = () => {
    console.log('Clicked!');
  };

  // With useCallback - same function reference
  const handleGoodClick = useCallback(() => {
    console.log('Clicked!');
  }, []); // No dependencies - never changes

  const handleWithDependencies = useCallback(() => {
    console.log('Count is:', count);
  }, [count]); // Recreated only when count changes

  return (
    <div>
      <ChildComponent onClick={handleGoodClick} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Testing Patterns

Component Testing

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { UserProfile } from './UserProfile';

describe('UserProfile', () => {
  const mockUser = {
    id: '1',
    name: 'John Doe',
    email: 'john@example.com'
  };

  it('renders user information', () => {
    render(<UserProfile user={mockUser} />);
    
    expect(screen.getByText(mockUser.name)).toBeInTheDocument();
    expect(screen.getByText(mockUser.email)).toBeInTheDocument();
  });

  it('handles edit button click', async () => {
    const handleEdit = jest.fn();
    render(<UserProfile user={mockUser} onEdit={handleEdit} />);
    
    const editButton = screen.getByRole('button', { name: /edit/i });
    await userEvent.click(editButton);
    
    expect(handleEdit).toHaveBeenCalledWith(mockUser);
  });

  it('shows loading state', () => {
    render(<UserProfile loading />);
    expect(screen.getByText(/loading/i)).toBeInTheDocument();
  });

  it('handles async data fetching', async () => {
    global.fetch = jest.fn(() =>
      Promise.resolve({
        ok: true,
        json: async () => mockUser
      })
    ) as jest.Mock;

    render(<UserProfileContainer userId="1" />);
    
    expect(screen.getByText(/loading/i)).toBeInTheDocument();
    
    await waitFor(() => {
      expect(screen.getByText(mockUser.name)).toBeInTheDocument();
    });
  });
});

Custom Hook Testing

import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';

describe('useCounter', () => {
  it('initializes with default value', () => {
    const { result } = renderHook(() => useCounter());
    expect(result.current.count).toBe(0);
  });

  it('initializes with custom value', () => {
    const { result } = renderHook(() => useCounter(10));
    expect(result.current.count).toBe(10);
  });

  it('increments count', () => {
    const { result } = renderHook(() => useCounter());
    
    act(() => {
      result.current.increment();
    });
    
    expect(result.current.count).toBe(1);
  });

  it('decrements count', () => {
    const { result } = renderHook(() => useCounter(5));
    
    act(() => {
      result.current.decrement();
    });
    
    expect(result.current.count).toBe(4);
  });

  it('resets count', () => {
    const { result } = renderHook(() => useCounter(10));
    
    act(() => {
      result.current.increment();
      result.current.reset();
    });
    
    expect(result.current.count).toBe(10);
  });
});

This reference provides advanced React patterns and techniques for building scalable, maintainable applications. Use these patterns when appropriate for your use case, considering performance, complexity, and team familiarity.

State Management

Zustand (React)

import create from 'zustand';
import { devtools, persist } from 'zustand/middleware';

interface Todo {
  id: string;
  text: string;
  completed: boolean;
}

interface TodoStore {
  todos: Todo[];
  filter: 'all' | 'active' | 'completed';
  
  addTodo: (text: string) => void;
  toggleTodo: (id: string) => void;
  deleteTodo: (id: string) => void;
  setFilter: (filter: TodoStore['filter']) => void;
  
  // Computed
  filteredTodos: () => Todo[];
  completedCount: () => number;
}

export const useTodoStore = create<TodoStore>()(
  devtools(
    persist(
      (set, get) => ({
        todos: [],
        filter: 'all',

        addTodo: (text) => set((state) => ({
          todos: [
            ...state.todos,
            {
              id: Date.now().toString(),
              text,
              completed: false
            }
          ]
        })),

        toggleTodo: (id) => set((state) => ({
          todos: state.todos.map(todo =>
            todo.id === id
              ? { ...todo, completed: !todo.completed }
              : todo
          )
        })),

        deleteTodo: (id) => set((state) => ({
          todos: state.todos.filter(todo => todo.id !== id)
        })),

        setFilter: (filter) => set({ filter }),

        filteredTodos: () => {
          const { todos, filter } = get();
          if (filter === 'active') return todos.filter(t => !t.completed);
          if (filter === 'completed') return todos.filter(t => t.completed);
          return todos;
        },

        completedCount: () => {
          return get().todos.filter(t => t.completed).length;
        }
      }),
      { name: 'todo-storage' }
    )
  )
);

// Usage
function TodoApp() {
  const { todos, filter, addTodo, toggleTodo, deleteTodo, setFilter, filteredTodos } = useTodoStore();

  return (
    <div>
      <AddTodoForm onAdd={addTodo} />
      <FilterButtons current={filter} onChange={setFilter} />
      <TodoList
        todos={filteredTodos()}
        onToggle={toggleTodo}
        onDelete={deleteTodo}
      />
    </div>
  );
}

React Query (Server State)

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

interface User {
  id: string;
  name: string;
  email: string;
}

// API functions
const userApi = {
  getAll: () => fetch('/api/users').then(r => r.json()),
  getById: (id: string) => fetch(`/api/users/${id}`).then(r => r.json()),
  create: (user: Omit<User, 'id'>) =>
    fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(user)
    }).then(r => r.json()),
  update: (id: string, updates: Partial<User>) =>
    fetch(`/api/users/${id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(updates)
    }).then(r => r.json())
};

// Hooks
function useUsers() {
  return useQuery({
    queryKey: ['users'],
    queryFn: userApi.getAll,
    staleTime: 5 * 60 * 1000, // 5 minutes
    cacheTime: 10 * 60 * 1000, // 10 minutes
  });
}

function useUser(id: string) {
  return useQuery({
    queryKey: ['users', id],
    queryFn: () => userApi.getById(id),
    enabled: !!id, // Only run if id is provided
  });
}

function useCreateUser() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: userApi.create,
    onSuccess: () => {
      // Invalidate and refetch users
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
  });
}

function useUpdateUser() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: ({ id, updates }: { id: string; updates: Partial<User> }) =>
      userApi.update(id, updates),
    onSuccess: (data, variables) => {
      // Update cache immediately
      queryClient.setQueryData(['users', variables.id], data);
      // Invalidate list
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
  });
}

// Component
function UserList() {
  const { data: users, isLoading, error } = useUsers();
  const createUser = useCreateUser();
  const updateUser = useUpdateUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <button
        onClick={() => createUser.mutate({ name: 'New User', email: 'new@example.com' })}
        disabled={createUser.isPending}
      >
        {createUser.isPending ? 'Creating...' : 'Add User'}
      </button>

      <ul>
        {users?.map(user => (
          <li key={user.id}>
            {user.name}
            <button
              onClick={() => updateUser.mutate({
                id: user.id,
                updates: { name: 'Updated Name' }
              })}
            >
              Update
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

TypeScript Best Practices

Type Safety and Inference

// Utility Types
type Nullable<T> = T | null;
type Optional<T> = T | undefined;
type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

// Generic API Response
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

async function fetchApi<T>(url: string): Promise<ApiResponse<T>> {
  const response = await fetch(url);
  return response.json();
}

// Usage with type inference
const userResponse = await fetchApi<User>('/api/users/1');
// userResponse.data is typed as User

// Discriminated Unions
type Result<T, E = Error> =
  | { success: true; data: T }
  | { success: false; error: E };

function divide(a: number, b: number): Result<number> {
  if (b === 0) {
    return { success: false, error: new Error('Division by zero') };
  }
  return { success: true, data: a / b };
}

const result = divide(10, 2);
if (result.success) {
  console.log(result.data); // TypeScript knows this exists
} else {
  console.error(result.error); // TypeScript knows this exists
}

// Type Guards
function isUser(value: unknown): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    'id' in value &&
    'name' in value &&
    'email' in value
  );
}

function processData(data: unknown) {
  if (isUser(data)) {
    // TypeScript knows data is User here
    console.log(data.name);
  }
}

// Const Assertions
const ROUTES = {
  HOME: '/',
  DASHBOARD: '/dashboard',
  PROFILE: '/profile'
} as const;

type Route = typeof ROUTES[keyof typeof ROUTES];
// Route = '/' | '/dashboard' | '/profile'

// Template Literal Types
type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type Endpoint = `/api/${string}`;
type HTTPRequest = `${HTTPMethod} ${Endpoint}`;

const request: HTTPRequest = 'GET /api/users'; // Valid
// const invalid: HTTPRequest = 'GET /users'; // Error

Advanced Patterns

// Builder Pattern with Fluent API
class QueryBuilder<T> {
  private filters: Array<(item: T) => boolean> = [];
  private sortFn?: (a: T, b: T) => number;
  private limitValue?: number;

  where(predicate: (item: T) => boolean): this {
    this.filters.push(predicate);
    return this;
  }

  sortBy(fn: (a: T, b: T) => number): this {
    this.sortFn = fn;
    return this;
  }

  limit(n: number): this {
    this.limitValue = n;
    return this;
  }

  execute(data: T[]): T[] {
    let result = data;

    // Apply filters
    for (const filter of this.filters) {
      result = result.filter(filter);
    }

    // Apply sort
    if (this.sortFn) {
      result = [...result].sort(this.sortFn);
    }

    // Apply limit
    if (this.limitValue) {
      result = result.slice(0, this.limitValue);
    }

    return result;
  }
}

// Usage
const query = new QueryBuilder<User>()
  .where(user => user.role === 'admin')
  .where(user => user.age > 18)
  .sortBy((a, b) => a.name.localeCompare(b.name))
  .limit(10);

const results = query.execute(users);

// Mapped Types
type ReadOnly<T> = {
  readonly [P in keyof T]: T[P];
};

type Mutable<T> = {
  -readonly [P in keyof T]: T[P];
};

// Conditional Types
type IsArray<T> = T extends any[] ? true : false;
type ArrayElement<T> = T extends (infer E)[] ? E : never;

// Example
type X = IsArray<number[]>; // true
type Y = IsArray<string>;   // false
type Z = ArrayElement<User[]>; // User

Vue.js Patterns and Best Practices

This reference provides advanced Vue.js patterns, Composition API techniques, and architectural approaches for building scalable Vue applications.

Composition API Patterns

Composables Organization

// composables/useUser.ts
import { ref, computed, Ref } from 'vue';

interface User {
  id: string;
  name: string;
  email: string;
  role: string;
}

export function useUser() {
  const user = ref<User | null>(null);
  const loading = ref(false);
  const error = ref<Error | null>(null);

  const isAdmin = computed(() => user.value?.role === 'admin');
  const displayName = computed(() => user.value?.name || 'Guest');

  async function fetchUser(id: string) {
    loading.value = true;
    error.value = null;

    try {
      const response = await fetch(`/api/users/${id}`);
      if (!response.ok) throw new Error('Failed to fetch user');
      user.value = await response.json();
    } catch (err) {
      error.value = err instanceof Error ? err : new Error('Unknown error');
    } finally {
      loading.value = false;
    }
  }

  async function updateUser(updates: Partial<User>) {
    if (!user.value) return;

    try {
      const response = await fetch(`/api/users/${user.value.id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updates)
      });

      if (!response.ok) throw new Error('Failed to update user');
      user.value = await response.json();
    } catch (err) {
      error.value = err instanceof Error ? err : new Error('Unknown error');
      throw err;
    }
  }

  function logout() {
    user.value = null;
  }

  return {
    user,
    loading,
    error,
    isAdmin,
    displayName,
    fetchUser,
    updateUser,
    logout
  };
}

Generic Fetch Composable

// composables/useFetch.ts
import { ref, Ref, watchEffect } from 'vue';

interface UseFetchOptions<T> {
  immediate?: boolean;
  onSuccess?: (data: T) => void;
  onError?: (error: Error) => void;
}

interface UseFetchReturn<T> {
  data: Ref<T | null>;
  loading: Ref<boolean>;
  error: Ref<Error | null>;
  execute: () => Promise<void>;
  refresh: () => Promise<void>;
}

export function useFetch<T>(
  url: string | Ref<string>,
  options: UseFetchOptions<T> = {}
): UseFetchReturn<T> {
  const data = ref<T | null>(null);
  const loading = ref(false);
  const error = ref<Error | null>(null);

  const execute = async () => {
    loading.value = true;
    error.value = null;

    try {
      const urlValue = typeof url === 'string' ? url : url.value;
      const response = await fetch(urlValue);

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const result = await response.json();
      data.value = result;
      options.onSuccess?.(result);
    } catch (err) {
      const errorObj = err instanceof Error ? err : new Error('Unknown error');
      error.value = errorObj;
      options.onError?.(errorObj);
    } finally {
      loading.value = false;
    }
  };

  const refresh = execute;

  // Auto-execute on URL change
  if (typeof url !== 'string') {
    watchEffect(() => {
      if (options.immediate !== false) {
        execute();
      }
    });
  } else if (options.immediate !== false) {
    execute();
  }

  return {
    data,
    loading,
    error,
    execute,
    refresh
  };
}

// Usage
<script setup lang="ts">
import { ref } from 'vue';
import { useFetch } from '@/composables/useFetch';

const userId = ref('123');
const { data: user, loading, error, refresh } = useFetch<User>(
  computed(() => `/api/users/${userId.value}`),
  {
    onSuccess: (user) => console.log('User loaded:', user),
    onError: (err) => console.error('Failed to load user:', err)
  }
);
</script>

<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else-if="user">
      <h2>{{ user.name }}</h2>
      <button @click="refresh">Refresh</button>
    </div>
  </div>
</template>

Form Validation Composable

// composables/useForm.ts
import { ref, reactive, computed, Ref } from 'vue';

type ValidationRule<T> = (value: T) => string | undefined;

interface FieldConfig<T> {
  value: T;
  rules?: ValidationRule<T>[];
}

interface FormConfig {
  [key: string]: FieldConfig<any>;
}

export function useForm<T extends FormConfig>(config: T) {
  type FormValues = { [K in keyof T]: T[K]['value'] };
  type FormErrors = Partial<Record<keyof T, string>>;
  type FormTouched = Partial<Record<keyof T, boolean>>;

  const values = reactive<FormValues>({} as FormValues);
  const errors = reactive<FormErrors>({});
  const touched = reactive<FormTouched>({});
  const isSubmitting = ref(false);

  // Initialize values
  for (const key in config) {
    values[key] = config[key].value;
  }

  function validateField(name: keyof T): string | undefined {
    const field = config[name];
    if (!field.rules) return undefined;

    for (const rule of field.rules) {
      const error = rule(values[name]);
      if (error) return error;
    }
    return undefined;
  }

  function validateAll(): boolean {
    let isValid = true;

    for (const key in config) {
      const error = validateField(key);
      if (error) {
        errors[key] = error;
        isValid = false;
      } else {
        delete errors[key];
      }
    }

    return isValid;
  }

  function handleBlur(name: keyof T) {
    touched[name] = true;
    const error = validateField(name);
    if (error) {
      errors[name] = error;
    } else {
      delete errors[name];
    }
  }

  function handleChange(name: keyof T, value: any) {
    values[name] = value;

    if (touched[name]) {
      const error = validateField(name);
      if (error) {
        errors[name] = error;
      } else {
        delete errors[name];
      }
    }
  }

  async function handleSubmit(onSubmit: (values: FormValues) => void | Promise<void>) {
    // Mark all as touched
    for (const key in config) {
      touched[key] = true;
    }

    if (!validateAll()) {
      return;
    }

    isSubmitting.value = true;
    try {
      await onSubmit(values);
    } finally {
      isSubmitting.value = false;
    }
  }

  function resetForm() {
    for (const key in config) {
      values[key] = config[key].value;
      delete errors[key];
      delete touched[key];
    }
    isSubmitting.value = false;
  }

  const isValid = computed(() => Object.keys(errors).length === 0);

  return {
    values,
    errors,
    touched,
    isSubmitting,
    isValid,
    handleChange,
    handleBlur,
    handleSubmit,
    resetForm,
    validateAll
  };
}

// Validation rules
export const required = (message = 'This field is required') =>
  (value: any) => value ? undefined : message;

export const email = (message = 'Invalid email address') =>
  (value: string) => /\S+@\S+\.\S+/.test(value) ? undefined : message;

export const minLength = (min: number, message?: string) =>
  (value: string) =>
    value.length >= min
      ? undefined
      : message || `Must be at least ${min} characters`;

export const maxLength = (max: number, message?: string) =>
  (value: string) =>
    value.length <= max
      ? undefined
      : message || `Must be at most ${max} characters`;

export const pattern = (regex: RegExp, message: string) =>
  (value: string) => regex.test(value) ? undefined : message;

// Usage
<script setup lang="ts">
import { useForm, required, email, minLength } from '@/composables/useForm';

const form = useForm({
  name: {
    value: '',
    rules: [required(), minLength(2, 'Name must be at least 2 characters')]
  },
  email: {
    value: '',
    rules: [required(), email()]
  },
  password: {
    value: '',
    rules: [required(), minLength(8, 'Password must be at least 8 characters')]
  }
});

async function onSubmit() {
  console.log('Submitting:', form.values);
  await fetch('/api/signup', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(form.values)
  });
}
</script>

<template>
  <form @submit.prevent="form.handleSubmit(onSubmit)">
    <div>
      <input
        :value="form.values.name"
        @input="e => form.handleChange('name', e.target.value)"
        @blur="() => form.handleBlur('name')"
        placeholder="Name"
      />
      <span v-if="form.touched.name && form.errors.name" class="error">
        {{ form.errors.name }}
      </span>
    </div>

    <div>
      <input
        type="email"
        :value="form.values.email"
        @input="e => form.handleChange('email', e.target.value)"
        @blur="() => form.handleBlur('email')"
        placeholder="Email"
      />
      <span v-if="form.touched.email && form.errors.email" class="error">
        {{ form.errors.email }}
      </span>
    </div>

    <div>
      <input
        type="password"
        :value="form.values.password"
        @input="e => form.handleChange('password', e.target.value)"
        @blur="() => form.handleBlur('password')"
        placeholder="Password"
      />
      <span v-if="form.touched.password && form.errors.password" class="error">
        {{ form.errors.password }}
      </span>
    </div>

    <button type="submit" :disabled="form.isSubmitting || !form.isValid">
      {{ form.isSubmitting ? 'Submitting...' : 'Submit' }}
    </button>
  </form>
</template>

Pagination Composable

// composables/usePagination.ts
import { ref, computed, Ref } from 'vue';

interface UsePaginationOptions {
  initialPage?: number;
  initialPageSize?: number;
}

export function usePagination<T>(
  items: Ref<T[]>,
  options: UsePaginationOptions = {}
) {
  const currentPage = ref(options.initialPage || 1);
  const pageSize = ref(options.initialPageSize || 10);

  const totalItems = computed(() => items.value.length);
  const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));

  const paginatedItems = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return items.value.slice(start, end);
  });

  const hasNext = computed(() => currentPage.value < totalPages.value);
  const hasPrev = computed(() => currentPage.value > 1);

  function nextPage() {
    if (hasNext.value) {
      currentPage.value++;
    }
  }

  function prevPage() {
    if (hasPrev.value) {
      currentPage.value--;
    }
  }

  function goToPage(page: number) {
    if (page >= 1 && page <= totalPages.value) {
      currentPage.value = page;
    }
  }

  function setPageSize(size: number) {
    pageSize.value = size;
    currentPage.value = 1; // Reset to first page
  }

  const pageNumbers = computed(() => {
    const pages: number[] = [];
    const maxVisible = 7;

    if (totalPages.value <= maxVisible) {
      for (let i = 1; i <= totalPages.value; i++) {
        pages.push(i);
      }
    } else {
      pages.push(1);

      let start = Math.max(2, currentPage.value - 2);
      let end = Math.min(totalPages.value - 1, currentPage.value + 2);

      if (start > 2) pages.push(-1); // Ellipsis

      for (let i = start; i <= end; i++) {
        pages.push(i);
      }

      if (end < totalPages.value - 1) pages.push(-1); // Ellipsis

      pages.push(totalPages.value);
    }

    return pages;
  });

  return {
    currentPage,
    pageSize,
    totalItems,
    totalPages,
    paginatedItems,
    hasNext,
    hasPrev,
    pageNumbers,
    nextPage,
    prevPage,
    goToPage,
    setPageSize
  };
}

// Usage
<script setup lang="ts">
import { ref } from 'vue';
import { usePagination } from '@/composables/usePagination';

const allUsers = ref<User[]>([/* ... many users ... */]);
const pagination = usePagination(allUsers, {
  initialPage: 1,
  initialPageSize: 20
});
</script>

<template>
  <div>
    <div class="users-list">
      <UserCard
        v-for="user in pagination.paginatedItems.value"
        :key="user.id"
        :user="user"
      />
    </div>

    <div class="pagination">
      <button
        @click="pagination.prevPage"
        :disabled="!pagination.hasPrev.value"
      >
        Previous
      </button>

      <button
        v-for="page in pagination.pageNumbers.value"
        :key="page"
        @click="() => page > 0 && pagination.goToPage(page)"
        :class="{ active: page === pagination.currentPage.value }"
        :disabled="page === -1"
      >
        {{ page === -1 ? '...' : page }}
      </button>

      <button
        @click="pagination.nextPage"
        :disabled="!pagination.hasNext.value"
      >
        Next
      </button>
    </div>

    <div class="page-size-selector">
      <select
        :value="pagination.pageSize.value"
        @change="e => pagination.setPageSize(Number(e.target.value))"
      >
        <option :value="10">10 per page</option>
        <option :value="20">20 per page</option>
        <option :value="50">50 per page</option>
        <option :value="100">100 per page</option>
      </select>
    </div>

    <div class="pagination-info">
      Showing {{ (pagination.currentPage.value - 1) * pagination.pageSize.value + 1 }}
      to {{ Math.min(pagination.currentPage.value * pagination.pageSize.value, pagination.totalItems.value) }}
      of {{ pagination.totalItems.value }} items
    </div>
  </div>
</template>

Pinia Advanced Patterns

Store Composition

// stores/modules/auth.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useAuthStore = defineStore('auth', () => {
  const user = ref<User | null>(null);
  const token = ref<string | null>(null);
  const loading = ref(false);

  const isAuthenticated = computed(() => !!token.value);
  const isAdmin = computed(() => user.value?.role === 'admin');

  async function login(email: string, password: string) {
    loading.value = true;
    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      });

      const data = await response.json();
      user.value = data.user;
      token.value = data.token;

      // Store token in localStorage
      localStorage.setItem('auth_token', data.token);
    } finally {
      loading.value = false;
    }
  }

  async function logout() {
    user.value = null;
    token.value = null;
    localStorage.removeItem('auth_token');
  }

  async function checkAuth() {
    const storedToken = localStorage.getItem('auth_token');
    if (!storedToken) return;

    try {
      const response = await fetch('/api/auth/me', {
        headers: { Authorization: `Bearer ${storedToken}` }
      });

      if (response.ok) {
        user.value = await response.json();
        token.value = storedToken;
      } else {
        logout();
      }
    } catch (error) {
      logout();
    }
  }

  return {
    user,
    token,
    loading,
    isAuthenticated,
    isAdmin,
    login,
    logout,
    checkAuth
  };
});

// stores/products.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
import { useAuthStore } from './modules/auth';

export const useProductsStore = defineStore('products', () => {
  const authStore = useAuthStore();

  const products = ref<Product[]>([]);
  const loading = ref(false);
  const error = ref<string | null>(null);

  const featuredProducts = computed(() =>
    products.value.filter(p => p.featured)
  );

  const canEdit = computed(() => authStore.isAdmin);

  async function fetchProducts() {
    loading.value = true;
    error.value = null;

    try {
      const response = await fetch('/api/products', {
        headers: authStore.token
          ? { Authorization: `Bearer ${authStore.token}` }
          : {}
      });

      products.value = await response.json();
    } catch (err) {
      error.value = err instanceof Error ? err.message : 'Failed to fetch';
    } finally {
      loading.value = false;
    }
  }

  async function addProduct(product: Omit<Product, 'id'>) {
    if (!canEdit.value) {
      throw new Error('Unauthorized');
    }

    const response = await fetch('/api/products', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${authStore.token}`
      },
      body: JSON.stringify(product)
    });

    const newProduct = await response.json();
    products.value.push(newProduct);
    return newProduct;
  }

  return {
    products,
    loading,
    error,
    featuredProducts,
    canEdit,
    fetchProducts,
    addProduct
  };
});

Store Plugins

// stores/plugins/persistence.ts
import { PiniaPluginContext } from 'pinia';

export function persistencePlugin({ store }: PiniaPluginContext) {
  const storageKey = `pinia-${store.$id}`;

  // Restore state from localStorage
  const savedState = localStorage.getItem(storageKey);
  if (savedState) {
    store.$patch(JSON.parse(savedState));
  }

  // Save state to localStorage on change
  store.$subscribe((mutation, state) => {
    localStorage.setItem(storageKey, JSON.stringify(state));
  });
}

// stores/plugins/logger.ts
export function loggerPlugin({ store }: PiniaPluginContext) {
  store.$subscribe((mutation, state) => {
    console.log(`[${store.$id}] ${mutation.type}`, mutation.payload);
  });

  // Log actions
  store.$onAction(({ name, args, after, onError }) => {
    const startTime = Date.now();
    console.log(`[${store.$id}] Action "${name}" started with args:`, args);

    after(() => {
      console.log(
        `[${store.$id}] Action "${name}" completed in ${Date.now() - startTime}ms`
      );
    });

    onError((error) => {
      console.error(`[${store.$id}] Action "${name}" failed:`, error);
    });
  });
}

// main.ts
import { createPinia } from 'pinia';
import { persistencePlugin } from './stores/plugins/persistence';
import { loggerPlugin } from './stores/plugins/logger';

const pinia = createPinia();
pinia.use(persistencePlugin);
if (import.meta.env.DEV) {
  pinia.use(loggerPlugin);
}

app.use(pinia);

Component Patterns

Provide/Inject Pattern

// Parent Component
<script setup lang="ts">
import { provide, ref } from 'vue';

interface Theme {
  primaryColor: string;
  secondaryColor: string;
  fontSize: number;
}

const theme = ref<Theme>({
  primaryColor: '#007bff',
  secondaryColor: '#6c757d',
  fontSize: 16
});

function updateTheme(updates: Partial<Theme>) {
  theme.value = { ...theme.value, ...updates };
}

// Provide to all descendants
provide('theme', theme);
provide('updateTheme', updateTheme);
</script>

<template>
  <div class="app" :style="{ fontSize: theme.fontSize + 'px' }">
    <Header />
    <MainContent />
    <Footer />
  </div>
</template>

// Child Component (any level deep)
<script setup lang="ts">
import { inject, Ref } from 'vue';

const theme = inject<Ref<Theme>>('theme');
const updateTheme = inject<(updates: Partial<Theme>) => void>('updateTheme');

if (!theme || !updateTheme) {
  throw new Error('Theme context not provided');
}

function increaseFontSize() {
  updateTheme({ fontSize: theme.value.fontSize + 2 });
}
</script>

<template>
  <div :style="{ color: theme.primaryColor }">
    <p>Themed content</p>
    <button @click="increaseFontSize">Increase Font Size</button>
  </div>
</template>

// Typed Injection Keys
// types/injectionKeys.ts
import { InjectionKey, Ref } from 'vue';

export const themeKey: InjectionKey<Ref<Theme>> = Symbol('theme');
export const updateThemeKey: InjectionKey<(updates: Partial<Theme>) => void> =
  Symbol('updateTheme');

// Usage with typed keys
provide(themeKey, theme);
provide(updateThemeKey, updateTheme);

const theme = inject(themeKey); // Type is Ref<Theme> | undefined
const updateTheme = inject(updateThemeKey);

Slot Patterns

// Basic Slots
<script setup lang="ts">
interface Props {
  title: string;
}

defineProps<Props>();
</script>

<template>
  <div class="card">
    <header class="card-header">
      <h2>{{ title }}</h2>
      <slot name="header-actions" />
    </header>

    <div class="card-body">
      <slot /> <!-- Default slot -->
    </div>

    <footer class="card-footer">
      <slot name="footer" />
    </footer>
  </div>
</template>

<!-- Usage -->
<Card title="User Profile">
  <template #header-actions>
    <button>Edit</button>
  </template>

  <p>User content goes here</p>

  <template #footer>
    <button>Save</button>
    <button>Cancel</button>
  </template>
</Card>

// Scoped Slots
<script setup lang="ts">
interface Item {
  id: string;
  name: string;
}

interface Props {
  items: Item[];
}

const props = defineProps<Props>();
</script>

<template>
  <ul class="list">
    <li v-for="item in items" :key="item.id">
      <slot name="item" :item="item" :index="index">
        <!-- Fallback content -->
        {{ item.name }}
      </slot>
    </li>
  </ul>
</template>

<!-- Usage with scoped slot -->
<List :items="users">
  <template #item="{ item, index }">
    <div class="user-item">
      <span>{{ index + 1 }}. {{ item.name }}</span>
      <button @click="editUser(item)">Edit</button>
    </div>
  </template>
</List>

// Renderless Component
<script setup lang="ts">
import { ref, computed } from 'vue';

interface Props {
  initialValue?: number;
  min?: number;
  max?: number;
  step?: number;
}

const props = withDefaults(defineProps<Props>(), {
  initialValue: 0,
  min: 0,
  max: 100,
  step: 1
});

const value = ref(props.initialValue);

const canIncrement = computed(() => value.value < props.max);
const canDecrement = computed(() => value.value > props.min);

function increment() {
  if (canIncrement.value) {
    value.value = Math.min(value.value + props.step, props.max);
  }
}

function decrement() {
  if (canDecrement.value) {
    value.value = Math.max(value.value - props.step, props.min);
  }
}

function reset() {
  value.value = props.initialValue;
}
</script>

<template>
  <slot
    :value="value"
    :canIncrement="canIncrement"
    :canDecrement="canDecrement"
    :increment="increment"
    :decrement="decrement"
    :reset="reset"
  />
</template>

<!-- Usage - completely custom UI -->
<Counter :min="0" :max="10" :step="2">
  <template #default="{ value, increment, decrement, canIncrement, canDecrement }">
    <div class="custom-counter">
      <button @click="decrement" :disabled="!canDecrement">-</button>
      <span class="value">{{ value }}</span>
      <button @click="increment" :disabled="!canIncrement">+</button>
    </div>
  </template>
</Counter>

Dynamic Components

<script setup lang="ts">
import { ref, Component, shallowRef } from 'vue';
import UserProfile from './UserProfile.vue';
import Settings from './Settings.vue';
import Dashboard from './Dashboard.vue';

interface Tab {
  name: string;
  component: Component;
  props?: Record<string, any>;
}

const tabs: Tab[] = [
  { name: 'Dashboard', component: Dashboard },
  { name: 'Profile', component: UserProfile, props: { userId: '123' } },
  { name: 'Settings', component: Settings }
];

const currentTab = ref(0);
const currentComponent = shallowRef(tabs[0].component);
const currentProps = ref(tabs[0].props || {});

function switchTab(index: number) {
  currentTab.value = index;
  currentComponent.value = tabs[index].component;
  currentProps.value = tabs[index].props || {};
}
</script>

<template>
  <div class="tabs">
    <div class="tab-buttons">
      <button
        v-for="(tab, index) in tabs"
        :key="tab.name"
        @click="switchTab(index)"
        :class="{ active: currentTab === index }"
      >
        {{ tab.name }}
      </button>
    </div>

    <div class="tab-content">
      <!-- Keep-alive caches component instances -->
      <KeepAlive>
        <component
          :is="currentComponent"
          v-bind="currentProps"
        />
      </KeepAlive>
    </div>
  </div>
</template>

// Async Components
<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

const HeavyComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorDisplay,
  delay: 200, // Show loading after 200ms
  timeout: 3000 // Show error after 3s
});
</script>

<template>
  <Suspense>
    <template #default>
      <HeavyComponent />
    </template>
    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>

Advanced Reactivity

Computed Setters

<script setup lang="ts">
import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`;
  },
  set(newValue: string) {
    const [first, last] = newValue.split(' ');
    firstName.value = first;
    lastName.value = last;
  }
});

// Can read and write
console.log(fullName.value); // "John Doe"
fullName.value = 'Jane Smith'; // Updates firstName and lastName
</script>

<template>
  <input v-model="fullName" placeholder="Full name" />
  <p>First: {{ firstName }}</p>
  <p>Last: {{ lastName }}</p>
</template>

Custom Refs

import { customRef } from 'vue';

// Debounced Ref
function useDebouncedRef<T>(value: T, delay = 200) {
  let timeout: number;

  return customRef<T>((track, trigger) => {
    return {
      get() {
        track(); // Track dependency
        return value;
      },
      set(newValue: T) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          value = newValue;
          trigger(); // Trigger update
        }, delay);
      }
    };
  });
}

// Usage
<script setup lang="ts">
const searchQuery = useDebouncedRef('', 500);

watch(searchQuery, (newValue) => {
  // Only called after 500ms of no changes
  console.log('Searching for:', newValue);
  performSearch(newValue);
});
</script>

<template>
  <input v-model="searchQuery" placeholder="Search..." />
</template>

// Throttled Ref
function useThrottledRef<T>(value: T, delay = 200) {
  let lastUpdate = 0;
  let pendingValue: T | null = null;
  let timeout: number;

  return customRef<T>((track, trigger) => {
    return {
      get() {
        track();
        return value;
      },
      set(newValue: T) {
        const now = Date.now();
        const timeSinceLastUpdate = now - lastUpdate;

        if (timeSinceLastUpdate >= delay) {
          value = newValue;
          lastUpdate = now;
          trigger();
        } else {
          pendingValue = newValue;
          clearTimeout(timeout);
          timeout = setTimeout(() => {
            if (pendingValue !== null) {
              value = pendingValue;
              pendingValue = null;
              lastUpdate = Date.now();
              trigger();
            }
          }, delay - timeSinceLastUpdate);
        }
      }
    };
  });
}

Watchers

<script setup lang="ts">
import { ref, watch, watchEffect } from 'vue';

const count = ref(0);
const doubled = ref(0);

// Simple watch
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

// Watch multiple sources
watch([count, doubled], ([newCount, newDoubled], [oldCount, oldDoubled]) => {
  console.log('Either count or doubled changed');
});

// Immediate execution
watch(count, (value) => {
  doubled.value = value * 2;
}, { immediate: true });

// Deep watch
const user = ref({ name: 'John', address: { city: 'NYC' } });

watch(user, (newUser) => {
  console.log('User changed:', newUser);
}, { deep: true });

// Watch getter
const state = reactive({ count: 0, nested: { value: 1 } });

watch(
  () => state.nested.value,
  (newValue) => {
    console.log('Nested value changed:', newValue);
  }
);

// watchEffect - auto-tracks dependencies
watchEffect(() => {
  console.log(`Count is ${count.value}, doubled is ${doubled.value}`);
  // Automatically re-runs when count or doubled changes
});

// Stop watching
const stopWatch = watch(count, () => {
  console.log('Count changed');
});

// Later...
stopWatch(); // Stops watching

// Flush timing
watch(count, () => {
  // Runs after component updates (post)
}, { flush: 'post' });

watch(count, () => {
  // Runs before component updates (pre) - default
}, { flush: 'pre' });

watch(count, () => {
  // Runs synchronously
}, { flush: 'sync' });
</script>

Performance Optimization

Virtual Scrolling

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';

interface Props {
  items: any[];
  itemHeight: number;
  containerHeight: number;
  buffer?: number;
}

const props = withDefaults(defineProps<Props>(), {
  buffer: 5
});

const scrollTop = ref(0);
const containerRef = ref<HTMLElement>();

const visibleRange = computed(() => {
  const start = Math.max(0, Math.floor(scrollTop.value / props.itemHeight) - props.buffer);
  const visibleCount = Math.ceil(props.containerHeight / props.itemHeight);
  const end = Math.min(
    props.items.length,
    start + visibleCount + props.buffer * 2
  );
  return { start, end };
});

const visibleItems = computed(() => {
  const { start, end } = visibleRange.value;
  return props.items.slice(start, end).map((item, index) => ({
    item,
    index: start + index
  }));
});

const totalHeight = computed(() => props.items.length * props.itemHeight);
const offsetY = computed(() => visibleRange.value.start * props.itemHeight);

function handleScroll(event: Event) {
  scrollTop.value = (event.target as HTMLElement).scrollTop;
}

onMounted(() => {
  containerRef.value?.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  containerRef.value?.removeEventListener('scroll', handleScroll);
});
</script>

<template>
  <div
    ref="containerRef"
    class="virtual-scroll-container"
    :style="{ height: containerHeight + 'px', overflow: 'auto' }"
  >
    <div :style="{ height: totalHeight + 'px', position: 'relative' }">
      <div :style="{ transform: `translateY(${offsetY}px)` }">
        <div
          v-for="{ item, index } in visibleItems"
          :key="index"
          :style="{ height: itemHeight + 'px' }"
        >
          <slot :item="item" :index="index" />
        </div>
      </div>
    </div>
  </div>
</template>

V-memo

<template>
  <!-- Re-render only when user.id changes -->
  <div v-memo="[user.id]">
    <UserCard :user="user" />
  </div>

  <!-- Never re-render -->
  <div v-memo="[]">
    <StaticContent />
  </div>

  <!-- Re-render when any dependency changes -->
  <div v-memo="[count, isActive, theme]">
    <ComplexComponent :count="count" :active="isActive" :theme="theme" />
  </div>
</template>

This reference provides advanced Vue.js patterns and techniques for building maintainable applications. Use these patterns based on your specific needs and project requirements.

Vue.js Development

Composition API

Modern Vue 3 Component:

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';

interface User {
  id: string;
  name: string;
  email: string;
}

interface Props {
  userId: string;
}

const props = defineProps<Props>();
const emit = defineEmits<{
  (e: 'update', user: User): void;
  (e: 'error', error: Error): void;
}>();

// Reactive state
const user = ref<User | null>(null);
const loading = ref(true);
const error = ref<Error | null>(null);

// Computed property
const displayName = computed(() => {
  if (!user.value) return '';
  return `${user.value.name} (${user.value.email})`;
});

// Methods
async function fetchUser() {
  try {
    loading.value = true;
    error.value = null;
    const response = await fetch(`/api/users/${props.userId}`);
    if (!response.ok) throw new Error('Failed to fetch user');
    user.value = await response.json();
  } catch (err) {
    error.value = err instanceof Error ? err : new Error('Unknown error');
    emit('error', error.value);
  } finally {
    loading.value = false;
  }
}

function updateUser(updates: Partial<User>) {
  if (!user.value) return;
  
  user.value = { ...user.value, ...updates };
  emit('update', user.value);
}

// Watch for prop changes
watch(() => props.userId, () => {
  fetchUser();
}, { immediate: true });

// Lifecycle
onMounted(() => {
  console.log('Component mounted');
});
</script>

<template>
  <div class="user-profile">
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else-if="!user">User not found</div>
    <div v-else>
      <h2>{{ displayName }}</h2>
      <button @click="updateUser({ name: 'Updated Name' })">
        Update Name
      </button>
    </div>
  </div>
</template>

<style scoped>
.user-profile {
  padding: 1rem;
}
</style>

Composables (Reusable Logic):

// composables/useAsync.ts
import { ref, Ref } from 'vue';

export function useAsync<T>(
  asyncFunction: () => Promise<T>
): {
  data: Ref<T | null>;
  loading: Ref<boolean>;
  error: Ref<Error | null>;
  execute: () => Promise<void>;
} {
  const data = ref<T | null>(null);
  const loading = ref(false);
  const error = ref<Error | null>(null);

  const execute = async () => {
    try {
      loading.value = true;
      error.value = null;
      data.value = await asyncFunction();
    } catch (err) {
      error.value = err instanceof Error ? err : new Error('Unknown error');
    } finally {
      loading.value = false;
    }
  };

  return { data, loading, error, execute };
}

// composables/useLocalStorage.ts
import { ref, watch, Ref } from 'vue';

export function useLocalStorage<T>(key: string, initialValue: T): Ref<T> {
  const storedValue = ref<T>(initialValue);

  // Initialize from localStorage
  try {
    const item = window.localStorage.getItem(key);
    if (item) {
      storedValue.value = JSON.parse(item);
    }
  } catch (error) {
    console.error(error);
  }

  // Watch for changes and sync to localStorage
  watch(storedValue, (newValue) => {
    try {
      window.localStorage.setItem(key, JSON.stringify(newValue));
    } catch (error) {
      console.error(error);
    }
  }, { deep: true });

  return storedValue;
}

// Usage in component
<script setup lang="ts">
import { useAsync } from '@/composables/useAsync';
import { useLocalStorage } from '@/composables/useLocalStorage';

const preferences = useLocalStorage('user-preferences', {
  theme: 'light',
  language: 'en'
});

const { data: users, loading, execute } = useAsync(() =>
  fetch('/api/users').then(r => r.json())
);

onMounted(() => {
  execute();
});
</script>

Pinia Store

// stores/userStore.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

interface User {
  id: string;
  name: string;
  email: string;
  role: string;
}

export const useUserStore = defineStore('user', () => {
  // State
  const currentUser = ref<User | null>(null);
  const users = ref<User[]>([]);
  const loading = ref(false);

  // Getters
  const isAdmin = computed(() => currentUser.value?.role === 'admin');
  const userCount = computed(() => users.value.length);

  // Actions
  async function fetchCurrentUser() {
    loading.value = true;
    try {
      const response = await fetch('/api/user/me');
      currentUser.value = await response.json();
    } catch (error) {
      console.error('Failed to fetch user', error);
    } finally {
      loading.value = false;
    }
  }

  async function fetchUsers() {
    loading.value = true;
    try {
      const response = await fetch('/api/users');
      users.value = await response.json();
    } catch (error) {
      console.error('Failed to fetch users', error);
    } finally {
      loading.value = false;
    }
  }

  async function updateUser(id: string, updates: Partial<User>) {
    const response = await fetch(`/api/users/${id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(updates)
    });

    if (response.ok) {
      const updated = await response.json();
      const index = users.value.findIndex(u => u.id === id);
      if (index !== -1) {
        users.value[index] = updated;
      }
      if (currentUser.value?.id === id) {
        currentUser.value = updated;
      }
    }
  }

  function logout() {
    currentUser.value = null;
    users.value = [];
  }

  return {
    // State
    currentUser,
    users,
    loading,
    // Getters
    isAdmin,
    userCount,
    // Actions
    fetchCurrentUser,
    fetchUsers,
    updateUser,
    logout
  };
});

// Usage in component
<script setup lang="ts">
import { useUserStore } from '@/stores/userStore';

const userStore = useUserStore();

onMounted(() => {
  userStore.fetchCurrentUser();
});
</script>

<template>
  <div>
    <div v-if="userStore.loading">Loading...</div>
    <div v-else-if="userStore.currentUser">
      <h2>{{ userStore.currentUser.name }}</h2>
      <p v-if="userStore.isAdmin">Admin User</p>
    </div>
  </div>
</template>