⚡ useMemo and useCallback

// ⚠️ This runs EVERY render, even if data hasn't changed!
function ProductList({ products }: { products: Product[] }) {
    console.log('Rendering ProductList');
    
    // This expensive calculation runs on EVERY render
    const sortedProducts = products
        .slice()
        .sort((a, b) => b.rating - a.rating);
    
    const averagePrice = products.reduce((sum, p) => sum + p.price, 0) / products.length;
    
    return (
        <div>
            <p>Average Price: ${averagePrice.toFixed(2)}</p>
            {sortedProducts.map(product => (
                <ProductCard key={product.id} product={product} />
            ))}
        </div>
    );
}

// If parent re-renders for ANY reason, these calculations run again!
// Even if products array hasn't changed!

// Manual memoization (conceptual)
const cache = new Map();

function expensiveCalculation(n: number): number {
    // Check if we've calculated this before
    if (cache.has(n)) {
        console.log('Returning cached result');
        return cache.get(n)!;
    }
    
    // Not in cache, calculate it
    console.log('Calculating...');
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
        result += n;
    }
    
    // Store in cache for next time
    cache.set(n, result);
    return result;
}

// First call - calculates (slow)
expensiveCalculation(5); // Logs: "Calculating..."

// Second call with same input - returns cached result (fast!)
expensiveCalculation(5); // Logs: "Returning cached result"

// Different input - calculates again
expensiveCalculation(10); // Logs: "Calculating..."

import { useMemo } from 'react';

function MyComponent({ data }: { data: number[] }) {
    // React will cache the result and only recalculate when 'data' changes
    const sortedData = useMemo(() => {
        console.log('Sorting data...');
        return [...data].sort((a, b) => a - b);
    }, [data]); // Dependency array - recalculate only when data changes
    
    return <div>{sortedData.join(', ')}</div>;
}

import { useMemo } from 'react';

function MyComponent() {
    const memoizedValue = useMemo(() => {
        // Expensive calculation here
        return calculateExpensiveValue();
    }, [dependency1, dependency2]); // Dependencies array
    
    return <div>{memoizedValue}</div>;
}

interface User {
    id: number;
    name: string;
    age: number;
    active: boolean;
}

interface UserListProps {
    users: User[];
    searchTerm: string;
}

function UserList({ users, searchTerm }: UserListProps) {
    // Without useMemo - filters on EVERY render
    // const filteredUsers = users.filter(user =>
    //     user.name.toLowerCase().includes(searchTerm.toLowerCase())
    // );
    
    // ✅ With useMemo - only filters when users or searchTerm change
    const filteredUsers = useMemo(() => {
        console.log('Filtering users...');
        return users.filter(user =>
            user.name.toLowerCase().includes(searchTerm.toLowerCase())
        );
    }, [users, searchTerm]);
    
    return (
        <div>
            <p>Found {filteredUsers.length} users</p>
            {filteredUsers.map(user => (
                <div key={user.id}>{user.name}</div>
            ))}
        </div>
    );
}

// Parent component re-renders due to other state?
// filteredUsers calculation is skipped! (unless users/searchTerm changed)

interface DataAnalyticsProps {
    data: number[];
}

function DataAnalytics({ data }: DataAnalyticsProps) {
    // Expensive statistical calculations
    const statistics = useMemo(() => {
        console.log('Calculating statistics...');
        
        const sorted = [...data].sort((a, b) => a - b);
        const sum = data.reduce((acc, val) => acc + val, 0);
        const mean = sum / data.length;
        const median = sorted[Math.floor(sorted.length / 2)];
        const variance = data.reduce((acc, val) => 
            acc + Math.pow(val - mean, 2), 0) / data.length;
        const stdDev = Math.sqrt(variance);
        
        return { mean, median, stdDev, min: sorted[0], max: sorted[sorted.length - 1] };
    }, [data]); // Only recalculate when data array changes
    
    return (
        <div>
            <h3>Statistics</h3>
            <p>Mean: {statistics.mean.toFixed(2)}</p>
            <p>Median: {statistics.median}</p>
            <p>Std Dev: {statistics.stdDev.toFixed(2)}</p>
            <p>Range: {statistics.min} - {statistics.max}</p>
        </div>
    );
}

interface Product {
    id: number;
    name: string;
    price: number;
    category: string;
    inStock: boolean;
}

interface ProductDashboardProps {
    products: Product[];
}

function ProductDashboard({ products }: ProductDashboardProps) {
    // Multiple derived values, all memoized
    const inStockProducts = useMemo(() => 
        products.filter(p => p.inStock),
        [products]
    );
    
    const totalValue = useMemo(() =>
        products.reduce((sum, p) => sum + p.price, 0),
        [products]
    );
    
    const categoryCounts = useMemo(() => {
        const counts: Record<string, number> = {};
        products.forEach(p => {
            counts[p.category] = (counts[p.category] || 0) + 1;
        });
        return counts;
    }, [products]);
    
    return (
        <div>
            <h2>Dashboard</h2>
            <p>Total Products: {products.length}</p>
            <p>In Stock: {inStockProducts.length}</p>
            <p>Total Value: ${totalValue.toFixed(2)}</p>
            <h3>By Category</h3>
            <ul>
                {Object.entries(categoryCounts).map(([cat, count]) => (
                    <li key={cat}>{cat}: {count}</li>
                ))}
            </ul>
        </div>
    );
}

import { useCallback } from 'react';

function MyComponent() {
    const memoizedCallback = useCallback(() => {
        // Function logic here
        doSomething(dependency1, dependency2);
    }, [dependency1, dependency2]); // Dependencies array
    
    return <button onClick={memoizedCallback}>Click me</button>;
}

// These are NOT equal!
const func1 = () => console.log('hello');
const func2 = () => console.log('hello');
console.log(func1 === func2); // false - different references!

// This causes problems in React
function Parent() {
    // This creates a NEW function on EVERY render
    const handleClick = () => {
        console.log('clicked');
    };
    
    // Child receives a "new" function every render
    // Even though the function does the exact same thing!
    return <Child onClick={handleClick} />;
}

// ❌ Problem: Child re-renders unnecessarily
const Child = React.memo(({ onClick }: { onClick: () => void }) => {
    console.log('Child rendered');
    return <button onClick={onClick}>Click</button>;
});

function Parent() {
    const [count, setCount] = useState(0);
    
    // New function reference on every render!
    const handleClick = () => {
        console.log('Button clicked');
    };
    
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
            {/* Child re-renders even though handleClick logic didn't change */}
            <Child onClick={handleClick} />
        </div>
    );
}

// Every time count changes, Child re-renders
// Because handleClick is a new reference each time!

// ✅ Solution: Stable function reference
const Child = React.memo(({ onClick }: { onClick: () => void }) => {
    console.log('Child rendered');
    return <button onClick={onClick}>Click</button>;
});

function Parent() {
    const [count, setCount] = useState(0);
    
    // Same function reference across renders!
    const handleClick = useCallback(() => {
        console.log('Button clicked');
    }, []); // No dependencies = never recreated
    
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
            {/* Child doesn't re-render when count changes! */}
            <Child onClick={handleClick} />
        </div>
    );
}

// Now Child only renders when it actually needs to!

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

interface TodoItemProps {
    todo: Todo;
    onToggle: (id: number) => void;
    onDelete: (id: number) => void;
}

// Memoized child component
const TodoItem = React.memo(({ todo, onToggle, onDelete }: TodoItemProps) => {
    console.log(`Rendering todo: ${todo.text}`);
    
    return (
        <div>
            <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => onToggle(todo.id)}
            />
            <span>{todo.text}</span>
            <button onClick={() => onDelete(todo.id)}>Delete</button>
        </div>
    );
});

function TodoList() {
    const [todos, setTodos] = useState<Todo[]>([
        { id: 1, text: 'Learn React', completed: false },
        { id: 2, text: 'Learn TypeScript', completed: true }
    ]);
    
    // ✅ Memoized callbacks - stable references
    const handleToggle = useCallback((id: number) => {
        setTodos(prev => prev.map(todo =>
            todo.id === id ? { ...todo, completed: !todo.completed } : todo
        ));
    }, []); // No dependencies needed - uses functional update
    
    const handleDelete = useCallback((id: number) => {
        setTodos(prev => prev.filter(todo => todo.id !== id));
    }, []);
    
    return (
        <div>
            {todos.map(todo => (
                <TodoItem
                    key={todo.id}
                    todo={todo}
                    onToggle={handleToggle}
                    onDelete={handleDelete}
                />
            ))}
        </div>
    );
}

// Only the affected TodoItem re-renders, not all of them!

interface SearchProps {
    onSearch: (query: string) => void;
}

function SearchComponent() {
    const [query, setQuery] = useState('');
    const [filter, setFilter] = useState('all');
    
    // Callback depends on filter
    const handleSearch = useCallback((searchTerm: string) => {
        console.log(`Searching for "${searchTerm}" with filter: ${filter}`);
        // API call with query and filter
        fetchResults(searchTerm, filter);
    }, [filter]); // Recreate when filter changes
    
    return (
        <div>
            <select value={filter} onChange={e => setFilter(e.target.value)}>
                <option value="all">All</option>
                <option value="active">Active</option>
                <option value="completed">Completed</option>
            </select>
            <SearchInput onSearch={handleSearch} />
        </div>
    );
}

interface FormProps {
    onSubmit: (data: FormData) => void;
}

function ComplexForm() {
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        message: ''
    });
    const [status, setStatus] = useState('idle');
    
    // Callback uses current formData
    const handleSubmit = useCallback((e: React.FormEvent) => {
        e.preventDefault();
        setStatus('submitting');
        
        // Use current formData values
        submitForm(formData)
            .then(() => setStatus('success'))
            .catch(() => setStatus('error'));
    }, [formData]); // Recreate when formData changes
    
    // Individual field handlers
    const handleNameChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        setFormData(prev => ({ ...prev, name: e.target.value }));
    }, []);
    
    const handleEmailChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        setFormData(prev => ({ ...prev, email: e.target.value }));
    }, []);
    
    return (
        <form onSubmit={handleSubmit}>
            <input value={formData.name} onChange={handleNameChange} />
            <input value={formData.email} onChange={handleEmailChange} />
            <button type="submit" disabled={status === 'submitting'}>
                Submit
            </button>
        </form>
    );
}

function ComparisonExample({ data }: { data: number[] }) {
    // useMemo - memoizes the RESULT (sorted array)
    const sortedData = useMemo(() => {
        return [...data].sort((a, b) => a - b); // Returns sorted array
    }, [data]);
    // sortedData is the array: [1, 2, 3, 4, 5]
    
    // useCallback - memoizes the FUNCTION
    const handleSort = useCallback(() => {
        console.log('Sorting data');
        return [...data].sort((a, b) => a - b); // Returns function
    }, [data]);
    // handleSort is the function: () => {...}
    
    return (
        <div>
            {/* useMemo: Use the value directly */}
            <p>Sorted: {sortedData.join(', ')}</p>
            
            {/* useCallback: Call the function when needed */}
            <button onClick={handleSort}>Sort</button>
        </div>
    );
}

// These are equivalent:

// Using useCallback
const handleClick = useCallback(() => {
    console.log('clicked');
}, []);

// Using useMemo to return a function
const handleClick = useMemo(() => {
    return () => {
        console.log('clicked');
    };
}, []);

// But useCallback is clearer and more readable!

interface Product {
    id: number;
    name: string;
    price: number;
    category: string;
}

interface ProductListProps {
    products: Product[];
}

function ProductList({ products }: ProductListProps) {
    const [searchTerm, setSearchTerm] = useState('');
    const [sortBy, setSortBy] = useState<'name' | 'price'>('name');
    
    // useMemo: Memoize the filtered and sorted products (result)
    const processedProducts = useMemo(() => {
        console.log('Processing products...');
        
        // Filter
        let filtered = products.filter(p =>
            p.name.toLowerCase().includes(searchTerm.toLowerCase())
        );
        
        // Sort
        filtered.sort((a, b) => {
            if (sortBy === 'name') {
                return a.name.localeCompare(b.name);
            }
            return a.price - b.price;
        });
        
        return filtered;
    }, [products, searchTerm, sortBy]);
    // processedProducts is the array of processed products
    
    // useCallback: Memoize the search handler (function)
    const handleSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        setSearchTerm(e.target.value);
    }, []);
    // handleSearch is the function itself
    
    // useCallback: Memoize the sort handler (function)
    const handleSortChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
        setSortBy(e.target.value as 'name' | 'price');
    }, []);
    
    return (
        <div>
            <input
                type="search"
                value={searchTerm}
                onChange={handleSearch}
                placeholder="Search products..."
            />
            
            <select value={sortBy} onChange={handleSortChange}>
                <option value="name">Sort by Name</option>
                <option value="price">Sort by Price</option>
            </select>
            
            <p>Showing {processedProducts.length} products</p>
            
            {processedProducts.map(product => (
                <ProductCard key={product.id} product={product} />
            ))}
        </div>
    );
}

// ❌ Over-optimization - the cost outweighs the benefit!
function SimpleCounter() {
    const [count, setCount] = useState(0);
    
    // Bad: Memoizing a simple addition
    const doubleCount = useMemo(() => count * 2, [count]);
    
    // Bad: Memoizing a simple string
    const message = useMemo(() => `Count is ${count}`, [count]);
    
    // Bad: Memoizing a simple function
    const increment = useCallback(() => setCount(c => c + 1), []);
    
    return (
        <div>
            <p>{message}</p>
            <p>Double: {doubleCount}</p>
            <button onClick={increment}>+</button>
        </div>
    );
}

// ✅ Better: Keep it simple
function SimpleCounter() {
    const [count, setCount] = useState(0);
    
    // These are so cheap, memoization adds overhead instead of removing it
    const doubleCount = count * 2;
    const message = `Count is ${count}`;
    
    return (
        <div>
            <p>{message}</p>
            <p>Double: {doubleCount}</p>
            <button onClick={() => setCount(c => c + 1)}>+</button>
        </div>
    );
}

// ✅ Good: Expensive operation on large dataset
function UserTable({ users }: { users: User[] }) { // 10,000+ users
    const [sortKey, setSortKey] = useState('name');
    
    const sortedUsers = useMemo(() => {
        return [...users].sort((a, b) => 
            a[sortKey].localeCompare(b[sortKey])
        );
    }, [users, sortKey]);
    
    // Without useMemo, sorting 10,000 items on every render is expensive!
}

// ✅ Good: Computationally expensive
function DataVisualization({ data }: { data: number[] }) {
    const statistics = useMemo(() => {
        // Multiple passes through large dataset
        const sorted = [...data].sort((a, b) => a - b);
        const mean = data.reduce((a, b) => a + b) / data.length;
        const median = sorted[Math.floor(data.length / 2)];
        const mode = calculateMode(data); // Custom expensive function
        const stdDev = calculateStandardDeviation(data, mean);
        
        return { mean, median, mode, stdDev };
    }, [data]);
    
    // These calculations are worth caching
}

// ✅ Good: Child is memoized and expensive to render
const ExpensiveList = React.memo(({ items, onItemClick }: Props) => {
    console.log('Rendering 1000+ items...');
    return (
        <div>
            {items.map(item => (
                <ExpensiveItem key={item.id} item={item} onClick={onItemClick} />
            ))}
        </div>
    );
});

function Parent() {
    const [unrelatedState, setUnrelatedState] = useState(0);
    const items = [...]; // Large array
    
    // Without useCallback, ExpensiveList re-renders when unrelatedState changes
    const handleItemClick = useCallback((id: number) => {
        console.log('Clicked:', id);
    }, []);
    
    return <ExpensiveList items={items} onItemClick={handleItemClick} />;
}

// ❌ Bad: Over-optimization
function Profile({ user }: { user: User }) {
    // These are instant - don't memoize!
    const fullName = useMemo(() => 
        `${user.firstName} ${user.lastName}`, [user]); // Overkill!
    
    const age = useMemo(() => 
        new Date().getFullYear() - user.birthYear, [user]); // Overkill!
    
    // Just do them directly:
    // const fullName = `${user.firstName} ${user.lastName}`;
    // const age = new Date().getFullYear() - user.birthYear;
}

// ❌ Bad: Unnecessary complexity
function Form() {
    const [name, setName] = useState('');
    
    // Pointless - just attached to a regular input
    const handleChange = useCallback((e) => {
        setName(e.target.value);
    }, []);
    
    // Regular input doesn't benefit from stable function reference
    return <input onChange={handleChange} />;
    
    // Better: <input onChange={e => setName(e.target.value)} />
}

// ❌ Bad: Defeats the purpose
function Component({ config }: { config: Config }) {
    // config is a new object every render, so this never caches!
    const processed = useMemo(() => {
        return processConfig(config);
    }, [config]); // config is always "new"
    
    // useMemo does nothing here - it recalculates every time anyway!
}

import { useMemo } from 'react';

function Component() {
    // TypeScript infers the type automatically
    const count = useMemo(() => {
        return 42; // TypeScript knows this is number
    }, []);
    // count: number
    
    // You can also explicitly type it
    const message = useMemo<string>(() => {
        return 'Hello World';
    }, []);
    // message: string
    
    // Arrays and objects are inferred too
    const users = useMemo(() => {
        return [
            { id: 1, name: 'Alice' },
            { id: 2, name: 'Bob' }
        ];
    }, []);
    // users: { id: number; name: string; }[]
}

interface User {
    id: number;
    name: string;
    email: string;
    role: 'admin' | 'user';
}

interface UserStats {
    total: number;
    admins: number;
    activeUsers: User[];
}

function UserDashboard({ users }: { users: User[] }) {
    // Explicitly type the return value for clarity
    const stats = useMemo<UserStats>(() => {
        return {
            total: users.length,
            admins: users.filter(u => u.role === 'admin').length,
            activeUsers: users.filter(u => u.role === 'user')
        };
    }, [users]);
    
    // TypeScript knows stats has these properties
    return (
        <div>
            <p>Total: {stats.total}</p>
            <p>Admins: {stats.admins}</p>
            <p>Active: {stats.activeUsers.length}</p>
        </div>
    );
}

import { useCallback } from 'react';

function Component() {
    // TypeScript infers parameter and return types
    const handleClick = useCallback((id: number) => {
        console.log('Clicked:', id);
    }, []);
    // handleClick: (id: number) => void
    
    // Explicitly typing event handlers
    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        console.log(e.target.value);
    }, []);
    // handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void
    
    // Functions that return values
    const calculateTotal = useCallback((items: number[]): number => {
        return items.reduce((sum, item) => sum + item, 0);
    }, []);
    // calculateTotal: (items: number[]) => number
}

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

interface ListProps<T> {
    items: T[];
    onItemClick: (item: T) => void;
    onItemDelete: (id: number) => void;
}

function GenericList<T extends { id: number }>({ 
    items, 
    onItemClick,
    onItemDelete 
}: ListProps<T>) {
    // Callback that works with generic type
    const handleClick = useCallback((item: T) => {
        onItemClick(item);
    }, [onItemClick]);
    
    // Type-safe delete handler
    const handleDelete = useCallback((id: number) => {
        onItemDelete(id);
    }, [onItemDelete]);
    
    return (
        <div>
            {items.map(item => (
                <div key={item.id}>
                    <button onClick={() => handleClick(item)}>View</button>
                    <button onClick={() => handleDelete(item.id)}>Delete</button>
                </div>
            ))}
        </div>
    );
}

interface FetchResult<T> {
    data: T | null;
    error: Error | null;
    loading: boolean;
}

function DataFetcher() {
    const [result, setResult] = useState<FetchResult<User>>({
        data: null,
        error: null,
        loading: false
    });
    
    // Async callback with proper typing
    const fetchUser = useCallback(async (id: number): Promise<void> => {
        setResult({ data: null, error: null, loading: true });
        
        try {
            const response = await fetch(`/api/users/${id}`);
            const data: User = await response.json();
            setResult({ data, error: null, loading: false });
        } catch (error) {
            setResult({ 
                data: null, 
                error: error as Error, 
                loading: false 
            });
        }
    }, []);
    // fetchUser: (id: number) => Promise<void>
    
    return (
        <button onClick={() => fetchUser(1)}>
            Load User
        </button>
    );
}

interface Product {
    id: number;
    name: string;
    price: number;
    stock: number;
}

function ProductManager() {
    const [products, setProducts] = useState<Product[]>([]);
    
    // Using Partial for updates
    const updateProduct = useCallback((
        id: number, 
        updates: Partial<Product>
    ): void => {
        setProducts(prev => prev.map(p => 
            p.id === id ? { ...p, ...updates } : p
        ));
    }, []);
    
    // Using Pick to select specific fields
    const updatePrice = useCallback((
        id: number,
        priceUpdate: Pick<Product, 'price'>
    ): void => {
        setProducts(prev => prev.map(p =>
            p.id === id ? { ...p, price: priceUpdate.price } : p
        ));
    }, []);
    
    // Using Omit to exclude fields
    const createProduct = useCallback((
        product: Omit<Product, 'id'>
    ): void => {
        const newProduct: Product = {
            ...product,
            id: Date.now()
        };
        setProducts(prev => [...prev, newProduct]);
    }, []);
    
    return <div>{/* UI */}</div>;
}

interface SearchOptions {
    query: string;
    filters: string[];
    sortBy: string;
}

function SearchComponent({ options }: { options: SearchOptions }) {
    // Dependencies are type-checked
    const results = useMemo(() => {
        return performSearch(options);
    }, [options]); // TypeScript ensures 'options' matches the type
    
    // Wrong dependencies cause type errors
    const handleSearch = useCallback(() => {
        console.log(options.query);
    }, []); // ⚠️ TypeScript warns: options should be in dependencies!
    
    // Correct dependencies
    const handleSearchCorrect = useCallback(() => {
        console.log(options.query);
    }, [options]); // ✅ TypeScript is happy
}

interface Employee {
    id: number;
    name: string;
    department: string;
    salary: number;
    hireDate: Date;
}

interface DataTableProps {
    employees: Employee[];
}

function EmployeeTable({ employees }: DataTableProps) {
    const [searchTerm, setSearchTerm] = useState('');
    const [sortField, setSortField] = useState<keyof Employee>('name');
    const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
    const [departmentFilter, setDepartmentFilter] = useState('all');
    
    // Memoize filtered and sorted data
    const processedEmployees = useMemo(() => {
        console.log('Processing employees...');
        
        // Filter by search term
        let filtered = employees.filter(emp =>
            emp.name.toLowerCase().includes(searchTerm.toLowerCase())
        );
        
        // Filter by department
        if (departmentFilter !== 'all') {
            filtered = filtered.filter(emp => emp.department === departmentFilter);
        }
        
        // Sort
        filtered.sort((a, b) => {
            const aVal = a[sortField];
            const bVal = b[sortField];
            
            if (typeof aVal === 'string' && typeof bVal === 'string') {
                return sortDirection === 'asc' 
                    ? aVal.localeCompare(bVal)
                    : bVal.localeCompare(aVal);
            }
            
            if (typeof aVal === 'number' && typeof bVal === 'number') {
                return sortDirection === 'asc' ? aVal - bVal : bVal - aVal;
            }
            
            return 0;
        });
        
        return filtered;
    }, [employees, searchTerm, sortField, sortDirection, departmentFilter]);
    
    // Memoize sort handler
    const handleSort = useCallback((field: keyof Employee) => {
        if (field === sortField) {
            setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
        } else {
            setSortField(field);
            setSortDirection('asc');
        }
    }, [sortField]);
    
    // Get unique departments for filter
    const departments = useMemo(() => {
        const depts = new Set(employees.map(e => e.department));
        return Array.from(depts);
    }, [employees]);
    
    return (
        <div>
            <input
                type="search"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="Search employees..."
            />
            
            <select 
                value={departmentFilter}
                onChange={(e) => setDepartmentFilter(e.target.value)}
            >
                <option value="all">All Departments</option>
                {departments.map(dept => (
                    <option key={dept} value={dept}>{dept}</option>
                ))}
            </select>
            
            <table>
                <thead>
                    <tr>
                        <th onClick={() => handleSort('name')}>Name</th>
                        <th onClick={() => handleSort('department')}>Department</th>
                        <th onClick={() => handleSort('salary')}>Salary</th>
                    </tr>
                </thead>
                <tbody>
                    {processedEmployees.map(emp => (
                        <tr key={emp.id}>
                            <td>{emp.name}</td>
                            <td>{emp.department}</td>
                            <td>${emp.salary.toLocaleString()}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
            
            <p>Showing {processedEmployees.length} of {employees.length} employees</p>
        </div>
    );
}

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

interface CartSummary {
    subtotal: number;
    tax: number;
    total: number;
    itemCount: number;
}

function ShoppingCart() {
    const [items, setItems] = useState<CartItem[]>([]);
    const [discountCode, setDiscountCode] = useState('');
    
    // Calculate cart summary
    const summary = useMemo<CartSummary>(() => {
        const subtotal = items.reduce(
            (sum, item) => sum + (item.price * item.quantity), 
            0
        );
        
        const tax = items.reduce(
            (sum, item) => sum + (item.price * item.quantity * item.taxRate),
            0
        );
        
        const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);
        
        let total = subtotal + tax;
        
        // Apply discount
        if (discountCode === 'SAVE10') {
            total *= 0.9;
        }
        
        return { subtotal, tax, total, itemCount };
    }, [items, discountCode]);
    
    // Memoized update handlers
    const updateQuantity = useCallback((id: number, quantity: number) => {
        setItems(prev => prev.map(item =>
            item.id === id ? { ...item, quantity: Math.max(0, quantity) } : item
        ));
    }, []);
    
    const removeItem = useCallback((id: number) => {
        setItems(prev => prev.filter(item => item.id !== id));
    }, []);
    
    const clearCart = useCallback(() => {
        setItems([]);
        setDiscountCode('');
    }, []);
    
    return (
        <div>
            <h2>Shopping Cart ({summary.itemCount} items)</h2>
            
            {items.map(item => (
                <CartItemRow
                    key={item.id}
                    item={item}
                    onUpdateQuantity={updateQuantity}
                    onRemove={removeItem}
                />
            ))}
            
            <div className="cart-summary">
                <p>Subtotal: ${summary.subtotal.toFixed(2)}</p>
                <p>Tax: ${summary.tax.toFixed(2)}</p>
                <p>Total: ${summary.total.toFixed(2)}</p>
            </div>
            
            <input
                type="text"
                value={discountCode}
                onChange={(e) => setDiscountCode(e.target.value.toUpperCase())}
                placeholder="Discount code"
            />
            
            <button onClick={clearCart}>Clear Cart</button>
        </div>
    );
}

// Memoized child component
const CartItemRow = React.memo(({ 
    item, 
    onUpdateQuantity, 
    onRemove 
}: {
    item: CartItem;
    onUpdateQuantity: (id: number, quantity: number) => void;
    onRemove: (id: number) => void;
}) => {
    console.log(`Rendering cart item: ${item.name}`);
    
    return (
        <div className="cart-item">
            <span>{item.name}</span>
            <span>${item.price.toFixed(2)}</span>
            <input
                type="number"
                value={item.quantity}
                onChange={(e) => onUpdateQuantity(item.id, Number(e.target.value))}
                min="0"
            />
            <span>${(item.price * item.quantity).toFixed(2)}</span>
            <button onClick={() => onRemove(item.id)}>Remove</button>
        </div>
    );
});

interface SearchResult {
    id: number;
    title: string;
    description: string;
}

function SearchWithDebounce() {
    const [query, setQuery] = useState('');
    const [debouncedQuery, setDebouncedQuery] = useState('');
    const [results, setResults] = useState<SearchResult[]>([]);
    const [isSearching, setIsSearching] = useState(false);
    
    // Debounce the search query
    useEffect(() => {
        const timer = setTimeout(() => {
            setDebouncedQuery(query);
        }, 500);
        
        return () => clearTimeout(timer);
    }, [query]);
    
    // Memoized search function
    const performSearch = useCallback(async (searchQuery: string) => {
        if (!searchQuery.trim()) {
            setResults([]);
            return;
        }
        
        setIsSearching(true);
        try {
            const response = await fetch(`/api/search?q=${searchQuery}`);
            const data: SearchResult[] = await response.json();
            setResults(data);
        } catch (error) {
            console.error('Search failed:', error);
            setResults([]);
        } finally {
            setIsSearching(false);
        }
    }, []);
    
    // Execute search when debounced query changes
    useEffect(() => {
        performSearch(debouncedQuery);
    }, [debouncedQuery, performSearch]);
    
    // Memoized highlight function
    const highlightMatch = useCallback((text: string, query: string): string => {
        if (!query) return text;
        
        const regex = new RegExp(`(${query})`, 'gi');
        return text.replace(regex, '<mark>$1</mark>');
    }, []);
    
    // Memoized filtered results (client-side refinement)
    const displayResults = useMemo(() => {
        return results.slice(0, 10); // Show top 10
    }, [results]);
    
    return (
        <div>
            <input
                type="search"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Search..."
            />
            
            {isSearching && <p>Searching...</p>}
            
            <div className="results">
                {displayResults.map(result => (
                    <div key={result.id} className="result">
                        <h3 dangerouslySetInnerHTML={{
                            __html: highlightMatch(result.title, query)
                        }} />
                        <p>{result.description}</p>
                    </div>
                ))}
            </div>
            
            {!isSearching && query && displayResults.length === 0 && (
                <p>No results found for "{query}"</p>
            )}
        </div>
    );
}

interface FormData {
    email: string;
    password: string;
    confirmPassword: string;
    age: number;
    terms: boolean;
}

interface ValidationErrors {
    [key: string]: string;
}

function RegistrationForm() {
    const [formData, setFormData] = useState<FormData>({
        email: '',
        password: '',
        confirmPassword: '',
        age: 0,
        terms: false
    });
    
    // Memoized validation
    const errors = useMemo<ValidationErrors>(() => {
        const newErrors: ValidationErrors = {};
        
        // Email validation
        if (formData.email && !formData.email.includes('@')) {
            newErrors.email = 'Invalid email address';
        }
        
        // Password strength
        if (formData.password && formData.password.length < 8) {
            newErrors.password = 'Password must be at least 8 characters';
        }
        
        if (formData.password && !/[A-Z]/.test(formData.password)) {
            newErrors.password = 'Password must contain uppercase letter';
        }
        
        // Password match
        if (formData.confirmPassword && 
            formData.password !== formData.confirmPassword) {
            newErrors.confirmPassword = 'Passwords do not match';
        }
        
        // Age validation
        if (formData.age && formData.age < 18) {
            newErrors.age = 'Must be 18 or older';
        }
        
        // Terms
        if (!formData.terms) {
            newErrors.terms = 'You must accept the terms';
        }
        
        return newErrors;
    }, [formData]);
    
    // Check if form is valid
    const isValid = useMemo(() => {
        return Object.keys(errors).length === 0 &&
               formData.email &&
               formData.password &&
               formData.confirmPassword &&
               formData.age > 0;
    }, [errors, formData]);
    
    // Memoized field update handler
    const updateField = useCallback((field: keyof FormData, value: any) => {
        setFormData(prev => ({ ...prev, [field]: value }));
    }, []);
    
    // Memoized submit handler
    const handleSubmit = useCallback((e: React.FormEvent) => {
        e.preventDefault();
        
        if (!isValid) {
            alert('Please fix errors before submitting');
            return;
        }
        
        console.log('Submitting:', formData);
        // API call here
    }, [isValid, formData]);
    
    return (
        <form onSubmit={handleSubmit}>
            <div>
                <input
                    type="email"
                    value={formData.email}
                    onChange={(e) => updateField('email', e.target.value)}
                    placeholder="Email"
                />
                {errors.email && <span className="error">{errors.email}</span>}
            </div>
            
            <div>
                <input
                    type="password"
                    value={formData.password}
                    onChange={(e) => updateField('password', e.target.value)}
                    placeholder="Password"
                />
                {errors.password && <span className="error">{errors.password}</span>}
            </div>
            
            <div>
                <input
                    type="password"
                    value={formData.confirmPassword}
                    onChange={(e) => updateField('confirmPassword', e.target.value)}
                    placeholder="Confirm Password"
                />
                {errors.confirmPassword && 
                    <span className="error">{errors.confirmPassword}</span>}
            </div>
            
            <div>
                <input
                    type="number"
                    value={formData.age || ''}
                    onChange={(e) => updateField('age', Number(e.target.value))}
                    placeholder="Age"
                />
                {errors.age && <span className="error">{errors.age}</span>}
            </div>
            
            <div>
                <label>
                    <input
                        type="checkbox"
                        checked={formData.terms}
                        onChange={(e) => updateField('terms', e.target.checked)}
                    />
                    I accept the terms and conditions
                </label>
                {errors.terms && <span className="error">{errors.terms}</span>}
            </div>
            
            <button type="submit" disabled={!isValid}>
                Register
            </button>
        </form>
    );
}

// Add console.log to see re-renders
function MyComponent({ data }: { data: number[] }) {
    console.log('MyComponent rendered');
    
    const sortedData = useMemo(() => {
        console.log('Sorting data...');
        return [...data].sort((a, b) => a - b);
    }, [data]);
    
    return <div>{sortedData.join(', ')}</div>;
}

// Without useMemo:
// Parent re-renders → "MyComponent rendered" + "Sorting data..."
// With useMemo:
// Parent re-renders → "MyComponent rendered" only (sorting skipped!)

import { Profiler, ProfilerOnRenderCallback } from 'react';

function App() {
    const onRenderCallback: ProfilerOnRenderCallback = (
        id, // Component name
        phase, // "mount" or "update"
        actualDuration, // Time spent rendering
        baseDuration, // Estimated time without memoization
        startTime, // When render started
        commitTime // When render committed
    ) => {
        console.log(`${id} (${phase}): ${actualDuration}ms`);
        
        if (actualDuration > 100) {
            console.warn(`Slow render detected in ${id}!`);
        }
    };
    
    return (
        <Profiler id="App" onRender={onRenderCallback}>
            <MyComponent />
        </Profiler>
    );
}

function PerformanceTest() {
    const [data] = useState(() => 
        Array.from({ length: 10000 }, (_, i) => i)
    );
    const [trigger, setTrigger] = useState(0);
    
    // Test WITHOUT useMemo
    console.time('Without useMemo');
    const sortedWithout = [...data].sort((a, b) => b - a);
    console.timeEnd('Without useMemo');
    
    // Test WITH useMemo
    console.time('With useMemo');
    const sortedWith = useMemo(() => {
        return [...data].sort((a, b) => b - a);
    }, [data]);
    console.timeEnd('With useMemo');
    
    return (
        <div>
            <button onClick={() => setTrigger(t => t + 1)}>
                Force Re-render ({trigger})
            </button>
            <p>Check console for timing results</p>
        </div>
    );
    
    // First render: Both take similar time
    // Re-renders: useMemo is instant, without is slow!
}

// Create a render counter
let renderCount = 0;

const ExpensiveChild = React.memo(({ 
    data, 
    onClick 
}: { 
    data: number[]; 
    onClick: () => void 
}) => {
    renderCount++;
    console.log(`ExpensiveChild render #${renderCount}`);
    
    return (
        <div>
            <p>Rendered {renderCount} times</p>
            <button onClick={onClick}>Click</button>
        </div>
    );
});

function Parent() {
    const [count, setCount] = useState(0);
    const data = [1, 2, 3];
    
    // Without useCallback
    // const handleClick = () => console.log('clicked');
    
    // With useCallback
    const handleClick = useCallback(() => {
        console.log('clicked');
    }, []);
    
    return (
        <div>
            <button onClick={() => setCount(c => c + 1)}>
                Parent count: {count}
            </button>
            <ExpensiveChild data={data} onClick={handleClick} />
        </div>
    );
}

// Without useCallback: Child re-renders every time parent count changes
// With useCallback: Child only renders once!

// Create a performance comparison
function PerformanceComparison() {
    const [withMemo, setWithMemo] = useState(true);
    const [data] = useState(() => 
        Array.from({ length: 50000 }, (_, i) => ({
            id: i,
            value: Math.random()
        }))
    );
    
    const startTime = performance.now();
    
    // Version WITH useMemo
    const processedWithMemo = useMemo(() => {
        return data
            .filter(item => item.value > 0.5)
            .sort((a, b) => b.value - a.value)
            .slice(0, 100);
    }, [data]);
    
    // Version WITHOUT useMemo
    const processedWithout = data
        .filter(item => item.value > 0.5)
        .sort((a, b) => b.value - a.value)
        .slice(0, 100);
    
    const endTime = performance.now();
    const duration = endTime - startTime;
    
    const result = withMemo ? processedWithMemo : processedWithout;
    
    return (
        <div>
            <button onClick={() => setWithMemo(!withMemo)}>
                Toggle: {withMemo ? 'WITH' : 'WITHOUT'} useMemo
            </button>
            <p>Render time: {duration.toFixed(2)}ms</p>
            <p>Items: {result.length}</p>
        </div>
    );
}

// ❌ Bad - missing dependency
function Component({ userId }: { userId: number }) {
    const [data, setData] = useState(null);
    
    const fetchData = useCallback(async () => {
        const response = await fetch(`/api/user/${userId}`);
        setData(await response.json());
    }, []); // Missing userId!
    
    // fetchData always uses the INITIAL userId value!
}

// ✅ Good - include all dependencies
function Component({ userId }: { userId: number }) {
    const [data, setData] = useState(null);
    
    const fetchData = useCallback(async () => {
        const response = await fetch(`/api/user/${userId}`);
        setData(await response.json());
    }, [userId]); // Correct!
}

// ❌ Bad - over-optimization
function Component({ name, age }: { name: string; age: number }) {
    const greeting = useMemo(() => `Hello ${name}`, [name]); // Overkill!
    const isAdult = useMemo(() => age >= 18, [age]); // Overkill!
    const doubleAge = useMemo(() => age * 2, [age]); // Overkill!
    
    return <div>{greeting} - Adult: {isAdult ? 'Yes' : 'No'}</div>;
}

// ✅ Good - keep it simple
function Component({ name, age }: { name: string; age: number }) {
    const greeting = `Hello ${name}`; // Instant!
    const isAdult = age >= 18; // Instant!
    const doubleAge = age * 2; // Instant!
    
    return <div>{greeting} - Adult: {isAdult ? 'Yes' : 'No'}</div>;
}

// ❌ Bad - dependency that always changes
function Component({ config }: { config: { theme: string } }) {
    // config is a new object every render!
    const theme = useMemo(() => {
        return config.theme.toUpperCase();
    }, [config]); // This recalculates every time anyway!
    
    return <div>{theme}</div>;
}

// ✅ Good - depend on primitive value
function Component({ config }: { config: { theme: string } }) {
    const theme = useMemo(() => {
        return config.theme.toUpperCase();
    }, [config.theme]); // Only recalculate when theme string changes
    
    return <div>{theme}</div>;
}

// ❌ Bad - useCallback is pointless here
const RegularChild = ({ onClick }: { onClick: () => void }) => {
    return <button onClick={onClick}>Click</button>;
};

function Parent() {
    const [count, setCount] = useState(0);
    
    // Pointless - RegularChild re-renders anyway!
    const handleClick = useCallback(() => {
        console.log('clicked');
    }, []);
    
    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(c => c + 1)}>+</button>
            <RegularChild onClick={handleClick} />
        </div>
    );
}

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

function Parent() {
    const [count, setCount] = useState(0);
    
    // Now it prevents MemoizedChild from re-rendering!
    const handleClick = useCallback(() => {
        console.log('clicked');
    }, []);
    
    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(c => c + 1)}>+</button>
            <MemoizedChild onClick={handleClick} />
        </div>
    );
}

// ❌ Bad - creating new array/object in dependencies
function Component({ items }: { items: number[] }) {
    const processed = useMemo(() => {
        return items.map(i => i * 2);
    }, [items.filter(i => i > 0)]); // New array every time!
    
    // This never uses the cached value!
}

// ✅ Good - stable dependencies
function Component({ items }: { items: number[] }) {
    // Filter first, then memoize
    const positiveItems = useMemo(() => 
        items.filter(i => i > 0), [items]);
    
    const processed = useMemo(() => 
        positiveItems.map(i => i * 2), [positiveItems]);
    
    return <div>{processed.join(', ')}</div>;
}

// ❌ Bad - optimizing before measuring
function SmallComponent() {
    const [items] = useState([1, 2, 3, 4, 5]); // Only 5 items!
    
    // Pointless optimization for tiny array
    const doubled = useMemo(() => 
        items.map(i => i * 2), [items]);
    
    return <div>{doubled.join(', ')}</div>;
}

// ✅ Good - no optimization needed
function SmallComponent() {
    const [items] = useState([1, 2, 3, 4, 5]);
    
    // So cheap, just do it!
    const doubled = items.map(i => i * 2);
    
    return <div>{doubled.join(', ')}</div>;
}