Refactoring Catalog: Framework-Specific Recipes

// AFTER: Separated concerns with custom hooks

// hooks/useUser.ts - Extracted data fetching hook
import { useState, useEffect } from 'react';
import type { User } from '../types';

interface UseUserResult {
    user: User | null;
    isLoading: boolean;
    error: string | null;
    refetch: () => void;
}

export function useUser(userId: string): UseUserResult {
    const [user, setUser] = useState<User | null>(null);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);

    const fetchUser = async () => {
        setIsLoading(true);
        setError(null);

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

    useEffect(() => {
        fetchUser();
    }, [userId]);

    return { user, isLoading, error, refetch: fetchUser };
}

// hooks/useOrders.ts - Extracted orders hook with filtering
import { useState, useEffect, useMemo } from 'react';
import type { Order } from '../types';

interface UseOrdersResult {
    orders: Order[];
    filteredOrders: Order[];
    isLoading: boolean;
    searchQuery: string;
    setSearchQuery: (query: string) => void;
}

export function useOrders(userId: string): UseOrdersResult {
    const [orders, setOrders] = useState<Order[]>([]);
    const [isLoading, setIsLoading] = useState(true);
    const [searchQuery, setSearchQuery] = useState('');

    useEffect(() => {
        setIsLoading(true);
        fetch(`/api/users/${userId}/orders`)
            .then(res => res.json())
            .then(data => {
                setOrders(data);
                setIsLoading(false);
            });
    }, [userId]);

    // Memoized filtering - no unnecessary re-renders
    const filteredOrders = useMemo(() => {
        if (!searchQuery) return orders;

        const query = searchQuery.toLowerCase();
        return orders.filter(order =>
            order.id.includes(query) ||
            order.product.toLowerCase().includes(query)
        );
    }, [orders, searchQuery]);

    return { orders, filteredOrders, isLoading, searchQuery, setSearchQuery };
}

// hooks/useNotifications.ts - Extracted notifications with actions
import { useState, useEffect, useCallback } from 'react';
import type { Notification } from '../types';

interface UseNotificationsResult {
    notifications: Notification[];
    unreadCount: number;
    markAsRead: (id: string) => Promise<void>;
    markAllAsRead: () => Promise<void>;
}

export function useNotifications(userId: string): UseNotificationsResult {
    const [notifications, setNotifications] = useState<Notification[]>([]);

    useEffect(() => {
        fetch(`/api/users/${userId}/notifications`)
            .then(res => res.json())
            .then(setNotifications);
    }, [userId]);

    const unreadCount = notifications.filter(n => !n.read).length;

    const markAsRead = useCallback(async (id: string) => {
        await fetch(`/api/notifications/${id}/read`, { method: 'POST' });
        setNotifications(prev =>
            prev.map(n => n.id === id ? { ...n, read: true } : n)
        );
    }, []);

    const markAllAsRead = useCallback(async () => {
        await fetch(`/api/users/${userId}/notifications/read-all`, { method: 'POST' });
        setNotifications(prev => prev.map(n => ({ ...n, read: true })));
    }, [userId]);

    return { notifications, unreadCount, markAsRead, markAllAsRead };
}

// UserDashboard.tsx - AFTER: Clean, focused component
import { useState } from 'react';
import { useUser } from '../hooks/useUser';
import { useOrders } from '../hooks/useOrders';
import { useNotifications } from '../hooks/useNotifications';
import { DashboardHeader } from './DashboardHeader';
import { OrdersTable } from './OrdersTable';
import { NotificationPanel } from './NotificationPanel';

export function UserDashboard({ userId }: { userId: string }) {
    const [activeTab, setActiveTab] = useState('overview');

    // Clean hook usage - concerns separated
    const { user, isLoading: userLoading, error } = useUser(userId);
    const { filteredOrders, searchQuery, setSearchQuery } = useOrders(userId);
    const { notifications, unreadCount, markAsRead } = useNotifications(userId);

    if (userLoading) return <LoadingSpinner />;
    if (error) return <ErrorDisplay message={error} />;
    if (!user) return null;

    return (
        <div className="max-w-7xl mx-auto p-6">
            <DashboardHeader
                user={user}
                unreadCount={unreadCount}
                activeTab={activeTab}
                onTabChange={setActiveTab}
            />

            {activeTab === 'orders' && (
                <OrdersTable
                    orders={filteredOrders}
                    searchQuery={searchQuery}
                    onSearchChange={setSearchQuery}
                />
            )}

            {activeTab === 'notifications' && (
                <NotificationPanel
                    notifications={notifications}
                    onMarkRead={markAsRead}
                />
            )}
        </div>
    );
}

// Benefits achieved:
// 1. Component reduced from 400+ lines to ~40 lines
// 2. Hooks are reusable across other components
// 3. Each hook is independently testable
// 4. Business logic separated from presentation
// 5. Memoization prevents unnecessary re-renders
// 6. TypeScript interfaces provide clear contracts

// AFTER: Context-based state management

// contexts/AppContext.tsx - Centralized state
import { createContext, useContext, useReducer, ReactNode } from 'react';

interface AppState {
    user: User | null;
    theme: 'light' | 'dark';
    cart: CartItem[];
}

type AppAction =
    | { type: 'SET_USER'; payload: User | null }
    | { type: 'TOGGLE_THEME' }
    | { type: 'ADD_TO_CART'; payload: CartItem }
    | { type: 'REMOVE_FROM_CART'; payload: string }
    | { type: 'CLEAR_CART' };

const initialState: AppState = {
    user: null,
    theme: 'light',
    cart: [],
};

function appReducer(state: AppState, action: AppAction): AppState {
    switch (action.type) {
        case 'SET_USER':
            return { ...state, user: action.payload };
        case 'TOGGLE_THEME':
            return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
        case 'ADD_TO_CART':
            return { ...state, cart: [...state.cart, action.payload] };
        case 'REMOVE_FROM_CART':
            return { ...state, cart: state.cart.filter(item => item.id !== action.payload) };
        case 'CLEAR_CART':
            return { ...state, cart: [] };
        default:
            return state;
    }
}

const AppContext = createContext<{
    state: AppState;
    dispatch: React.Dispatch<AppAction>;
} | null>(null);

export function AppProvider({ children }: { children: ReactNode }) {
    const [state, dispatch] = useReducer(appReducer, initialState);

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

// Custom hooks for specific state slices
export function useUser() {
    const context = useContext(AppContext);
    if (!context) throw new Error('useUser must be within AppProvider');

    return {
        user: context.state.user,
        setUser: (user: User | null) =>
            context.dispatch({ type: 'SET_USER', payload: user }),
    };
}

export function useTheme() {
    const context = useContext(AppContext);
    if (!context) throw new Error('useTheme must be within AppProvider');

    return {
        theme: context.state.theme,
        toggleTheme: () => context.dispatch({ type: 'TOGGLE_THEME' }),
    };
}

export function useCart() {
    const context = useContext(AppContext);
    if (!context) throw new Error('useCart must be within AppProvider');

    return {
        cart: context.state.cart,
        cartCount: context.state.cart.length,
        addToCart: (item: CartItem) =>
            context.dispatch({ type: 'ADD_TO_CART', payload: item }),
        removeFromCart: (id: string) =>
            context.dispatch({ type: 'REMOVE_FROM_CART', payload: id }),
        clearCart: () => context.dispatch({ type: 'CLEAR_CART' }),
    };
}

// App.tsx - Clean, no prop drilling
function App() {
    return (
        <AppProvider>
            <Layout>
                <Main />
            </Layout>
        </AppProvider>
    );
}

// Header.tsx - Direct access to needed state
function Header() {
    return (
        <header>
            <Logo />
            <Nav />
            <ThemeToggle />
            <CartIcon />
        </header>
    );
}

// CartIcon.tsx - Uses only what it needs
function CartIcon() {
    const { cartCount } = useCart();

    return (
        <button className="relative">
            <ShoppingCartIcon />
            {cartCount > 0 && (
                <span className="badge">{cartCount}</span>
            )}
        </button>
    );
}

// Benefits:
// 1. No prop drilling - components access state directly
// 2. Adding features doesn't require updating intermediate components
// 3. State updates are centralized and predictable
// 4. Custom hooks provide type-safe, focused interfaces
// 5. Easy to test - mock the context provider