Custom Hooks

After building the POS system for a few weeks, I noticed I was copying and pasting the same data-fetching pattern everywhere: set loading to true, fetch data, handle errors, set loading to false. Every product list, order history, and category selector had identical logic with different URLs. I had the same cart operations duplicated across components. The code worked, but it violated the DRY principle so hard it hurt.

That's when I discovered custom hooks—the ability to extract reusable stateful logic into functions. Not just any functions, but functions that can use hooks themselves. I turned 200 lines of repeated fetch logic into a single useProducts hook. Cart operations became useCart. Authentication became useAuth. My components went from 100 lines to 20.

What Are Custom Hooks?

Custom hooks are JavaScript functions that use React hooks. They let you extract component logic into reusable functions.

Rules:

1. Name must start with use (e.g., useProducts, useCart)

2. Can call other hooks (useState, useEffect, useContext)

3. Must follow the Rules of Hooks (only call at top level)

When to create a custom hook:

• You're copying the same stateful logic across components

• Complex logic is making your component hard to read

• You want to share logic across your app

In the POS system, I created hooks for:

• useProducts - Fetching and filtering products

• useCart - Cart operations

• useAuth - Authentication state and actions

• useLocalStorage - Persisting state

• useDebounce - Debouncing search input

Your First Custom Hook: useProducts

Let's extract the product-fetching logic into a reusable hook.

Before: Repeated in Every Component

// ProductList.tsx
function ProductList() {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  
  useEffect(() => {
    const fetchProducts = async () => {
      try {
        setLoading(true);
        setError(null);
        const response = await fetch('/api/products');
        const data = await response.json();
        setProducts(data);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load');
      } finally {
        setLoading(false);
      }
    };
    
    fetchProducts();
  }, []);
  
  // ... component render
}

// CategoryPage.tsx - Same code again!
function CategoryPage({ category }: { category: string }) {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  
  useEffect(() => {
    const fetchProducts = async () => {
      try {
        setLoading(true);
        setError(null);
        const response = await fetch(`/api/products?category=${category}`);
        const data = await response.json();
        setProducts(data);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load');
      } finally {
        setLoading(false);
      }
    };
    
    fetchProducts();
  }, [category]);
  
  // ... component render
}

Problems: Duplicated logic, hard to maintain, easy to introduce bugs.

After: Single Reusable Hook

// hooks/useProducts.ts
import { useState, useEffect } from 'react';

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

interface UseProductsOptions {
  category?: string;
  search?: string;
}

export function useProducts(options: UseProductsOptions = {}) {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  
  const { category, search } = options;
  
  useEffect(() => {
    const fetchProducts = async () => {
      try {
        setLoading(true);
        setError(null);
        
        // Build URL with query params
        const params = new URLSearchParams();
        if (category) params.append('category', category);
        if (search) params.append('search', search);
        
        const url = `/api/products?${params.toString()}`;
        const response = await fetch(url);
        
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        setProducts(data);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load products');
      } finally {
        setLoading(false);
      }
    };
    
    fetchProducts();
  }, [category, search]); // Re-fetch when filters change
  
  return { products, loading, error };
}

Using the Hook

// ProductList.tsx
import { useProducts } from '../hooks/useProducts';

function ProductList() {
  const { products, loading, error } = useProducts();
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  
  return (
    <div className="product-list">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// CategoryPage.tsx
function CategoryPage({ category }: { category: string }) {
  const { products, loading, error } = useProducts({ category });
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  
  return (
    <div className="category-page">
      <h1>{category} Products</h1>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// SearchPage.tsx
function SearchPage({ searchTerm }: { searchTerm: string }) {
  const { products, loading, error } = useProducts({ search: searchTerm });
  
  // Same simple component!
}

Benefits:

• DRY (Don't Repeat Yourself)

• Easier to test

• Easier to maintain

• Components stay focused on rendering

Building useCart Hook

Let's extract cart operations into a reusable hook.

// hooks/useCart.ts
import { useState, useEffect, useCallback } from 'react';

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

interface CartItem {
  productId: string;
  name: string;
  price: number;
  quantity: number;
}

export function useCart() {
  // Load initial cart from localStorage
  const [cart, setCart] = useState<CartItem[]>(() => {
    const savedCart = localStorage.getItem('pos_cart');
    return savedCart ? JSON.parse(savedCart) : [];
  });
  
  // Persist cart to localStorage whenever it changes
  useEffect(() => {
    localStorage.setItem('pos_cart', JSON.stringify(cart));
  }, [cart]);
  
  // Add item to cart (or increment quantity if exists)
  const addToCart = useCallback((product: Product) => {
    setCart(prevCart => {
      const existingItem = prevCart.find(item => item.productId === product.id);
      
      if (existingItem) {
        // Increment quantity
        return prevCart.map(item =>
          item.productId === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      } else {
        // Add new item
        return [...prevCart, {
          productId: product.id,
          name: product.name,
          price: product.price,
          quantity: 1
        }];
      }
    });
  }, []);
  
  // Remove item from cart
  const removeFromCart = useCallback((productId: string) => {
    setCart(prevCart => prevCart.filter(item => item.productId !== productId));
  }, []);
  
  // Update item quantity
  const updateQuantity = useCallback((productId: string, quantity: number) => {
    if (quantity <= 0) {
      removeFromCart(productId);
      return;
    }
    
    setCart(prevCart =>
      prevCart.map(item =>
        item.productId === productId
          ? { ...item, quantity }
          : item
      )
    );
  }, [removeFromCart]);
  
  // Clear entire cart
  const clearCart = useCallback(() => {
    setCart([]);
  }, []);
  
  // Get item by id
  const getItem = useCallback((productId: string) => {
    return cart.find(item => item.productId === productId);
  }, [cart]);
  
  // Check if item is in cart
  const isInCart = useCallback((productId: string) => {
    return cart.some(item => item.productId === productId);
  }, [cart]);
  
  // Derived values
  const itemCount = cart.reduce((sum, item) => sum + item.quantity, 0);
  const subtotal = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const tax = subtotal * 0.05; // 5% tax
  const total = subtotal + tax;
  
  return {
    cart,
    addToCart,
    removeFromCart,
    updateQuantity,
    clearCart,
    getItem,
    isInCart,
    itemCount,
    subtotal,
    tax,
    total
  };
}

Using useCart

// components/ProductCard.tsx
import { useCart } from '../hooks/useCart';

function ProductCard({ product }: { product: Product }) {
  const { addToCart, isInCart, getItem } = useCart();
  
  const inCart = isInCart(product.id);
  const cartItem = getItem(product.id);
  
  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      <p>{product.price} MMK</p>
      
      {inCart ? (
        <div>
          <span>In cart: {cartItem?.quantity}</span>
          <button onClick={() => addToCart(product)}>Add More</button>
        </div>
      ) : (
        <button onClick={() => addToCart(product)}>Add to Cart</button>
      )}
    </div>
  );
}

// components/CartSummary.tsx
function CartSummary() {
  const { cart, removeFromCart, updateQuantity, itemCount, total } = useCart();
  
  return (
    <div className="cart-summary">
      <h2>Cart ({itemCount} items)</h2>
      
      {cart.map(item => (
        <div key={item.productId} className="cart-item">
          <span>{item.name}</span>
          <input 
            type="number"
            value={item.quantity}
            onChange={(e) => updateQuantity(item.productId, parseInt(e.target.value))}
          />
          <button onClick={() => removeFromCart(item.productId)}>Remove</button>
        </div>
      ))}
      
      <div className="total">
        <h3>Total: {total.toLocaleString()} MMK</h3>
      </div>
    </div>
  );
}

Building useAuth Hook

Authentication logic is another great candidate for a custom hook.

// hooks/useAuth.ts
import { useState, useEffect, useCallback } from 'react';

interface User {
  id: string;
  email: string;
  name: string;
  role: 'admin' | 'cashier' | 'manager';
}

interface LoginCredentials {
  email: string;
  password: string;
}

export function useAuth() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  
  // Check if user is already authenticated on mount
  useEffect(() => {
    const checkAuth = async () => {
      const token = localStorage.getItem('authToken');
      
      if (!token) {
        setLoading(false);
        return;
      }
      
      try {
        const response = await fetch('/api/auth/me', {
          headers: {
            'Authorization': `Bearer ${token}`
          }
        });
        
        if (response.ok) {
          const userData = await response.json();
          setUser(userData);
        } else {
          localStorage.removeItem('authToken');
        }
      } catch (err) {
        console.error('Auth check failed:', err);
        localStorage.removeItem('authToken');
      } finally {
        setLoading(false);
      }
    };
    
    checkAuth();
  }, []);
  
  // Login
  const login = useCallback(async (credentials: LoginCredentials) => {
    try {
      setError(null);
      setLoading(true);
      
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(credentials)
      });
      
      if (!response.ok) {
        throw new Error('Invalid credentials');
      }
      
      const data = await response.json();
      localStorage.setItem('authToken', data.token);
      setUser(data.user);
      
      return data.user;
    } catch (err) {
      const message = err instanceof Error ? err.message : 'Login failed';
      setError(message);
      throw err;
    } finally {
      setLoading(false);
    }
  }, []);
  
  // Logout
  const logout = useCallback(() => {
    localStorage.removeItem('authToken');
    setUser(null);
  }, []);
  
  // Check if user has specific role
  const hasRole = useCallback((role: string) => {
    return user?.role === role;
  }, [user]);
  
  // Check if user has permission
  const hasPermission = useCallback((permission: string) => {
    // In a real app, check against user permissions
    const rolePermissions: Record<string, string[]> = {
      admin: ['manage_users', 'manage_products', 'view_reports', 'process_sales'],
      manager: ['manage_products', 'view_reports', 'process_sales'],
      cashier: ['process_sales']
    };
    
    return user ? rolePermissions[user.role]?.includes(permission) : false;
  }, [user]);
  
  return {
    user,
    loading,
    error,
    isAuthenticated: !!user,
    login,
    logout,
    hasRole,
    hasPermission
  };
}

Using useAuth

// components/LoginForm.tsx
import { useAuth } from '../hooks/useAuth';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const { login, error, loading } = useAuth();
  
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    try {
      await login({ email, password });
      // Will redirect automatically when user state changes
    } catch (err) {
      // Error already set in hook
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <h2>Login</h2>
      {error && <div className="error">{error}</div>}
      
      <input 
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        disabled={loading}
      />
      
      <input 
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        disabled={loading}
      />
      
      <button type="submit" disabled={loading}>
        {loading ? 'Logging in...' : 'Login'}
      </button>
    </form>
  );
}

// components/ProtectedRoute.tsx
function ProtectedRoute({ children, requiredRole }: { children: ReactNode; requiredRole?: string }) {
  const { isAuthenticated, hasRole, loading } = useAuth();
  
  if (loading) {
    return <div>Loading...</div>;
  }
  
  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }
  
  if (requiredRole && !hasRole(requiredRole)) {
    return <div>Access denied</div>;
  }
  
  return <>{children}</>;
}

Building useLocalStorage Hook

A general-purpose hook for persisting state:

// hooks/useLocalStorage.ts
import { useState, useEffect } from 'react';

export function useLocalStorage<T>(key: string, initialValue: T) {
  // Get from localStorage or use initial value
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(`Error loading ${key} from localStorage:`, error);
      return initialValue;
    }
  });
  
  // Save to localStorage whenever value changes
  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error(`Error saving ${key} to localStorage:`, error);
    }
  }, [key, storedValue]);
  
  return [storedValue, setStoredValue] as const;
}

Using useLocalStorage

// Before: Manual localStorage management
function UserPreferences() {
  const [theme, setTheme] = useState(() => {
    const saved = localStorage.getItem('theme');
    return saved || 'light';
  });
  
  useEffect(() => {
    localStorage.setItem('theme', theme);
  }, [theme]);
  
  // ...
}

// After: Simple hook
function UserPreferences() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  
  // That's it! Automatically persisted
}

Building useDebounce Hook

For search inputs that shouldn't trigger API calls on every keystroke:

// hooks/useDebounce.ts
import { useState, useEffect } from 'react';

export function useDebounce<T>(value: T, delay: number = 500): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);
  
  useEffect(() => {
    // Set timeout to update debounced value after delay
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    
    // Cleanup: cancel timeout if value changes before delay
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);
  
  return debouncedValue;
}

Using useDebounce

// components/ProductSearch.tsx
import { useState } from 'react';
import { useDebounce } from '../hooks/useDebounce';
import { useProducts } from '../hooks/useProducts';

function ProductSearch() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearch = useDebounce(searchTerm, 300);
  
  // Only fetches when user stops typing for 300ms
  const { products, loading } = useProducts({ search: debouncedSearch });
  
  return (
    <div>
      <input 
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search products..."
      />
      
      {loading && <div>Searching...</div>}
      
      <div className="results">
        {products.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

Without debounce: Type "chicken" → 7 API calls (c, ch, chi, chic, chick, chicke, chicken)

With debounce: Type "chicken" → 1 API call (after you stop typing)

Composing Hooks Together

Hooks can use other hooks. Here's a powerful pattern:

// hooks/useProductSearch.ts
import { useState } from 'react';
import { useDebounce } from './useDebounce';
import { useProducts } from './useProducts';

export function useProductSearch() {
  const [searchTerm, setSearchTerm] = useState('');
  const [category, setCategory] = useState('all');
  
  const debouncedSearch = useDebounce(searchTerm, 300);
  
  const { products, loading, error } = useProducts({
    search: debouncedSearch,
    category: category === 'all' ? undefined : category
  });
  
  return {
    searchTerm,
    setSearchTerm,
    category,
    setCategory,
    products,
    loading,
    error
  };
}

Using the Composed Hook

// components/ProductSearchPage.tsx
function ProductSearchPage() {
  const {
    searchTerm,
    setSearchTerm,
    category,
    setCategory,
    products,
    loading,
    error
  } = useProductSearch();
  
  return (
    <div>
      <input 
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      
      <select value={category} onChange={(e) => setCategory(e.target.value)}>
        <option value="all">All</option>
        <option value="food">Food</option>
        <option value="drinks">Drinks</option>
      </select>
      
      {loading && <div>Loading...</div>}
      {error && <div>Error: {error}</div>}
      
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

The component is so clean! All the complex logic is in the hook.

Rules of Hooks

These are CRITICAL and React will break if you violate them:

1. Only Call Hooks at the Top Level

// ❌ WRONG - Conditional hook
function ProductList({ showProducts }: { showProducts: boolean }) {
  if (showProducts) {
    const { products } = useProducts(); // ❌ Conditional!
  }
}

// ❌ WRONG - Hook in loop
function MultipleProducts({ ids }: { ids: string[] }) {
  ids.forEach(id => {
    const product = useProduct(id); // ❌ In loop!
  });
}

// ✅ CORRECT
function ProductList({ showProducts }: { showProducts: boolean }) {
  const { products } = useProducts(); // ✅ Top level
  
  if (!showProducts) return null;
  
  return <div>{/* render products */}</div>;
}

2. Only Call Hooks from React Functions

// ❌ WRONG - Hook in regular function
function calculateTotal(cart) {
  const [total, setTotal] = useState(0); // ❌ Not in React function
  return total;
}

// ✅ CORRECT - Hook in component
function CartTotal({ cart }) {
  const [total, setTotal] = useState(0); // ✅ In component
  return <div>{total}</div>;
}

// ✅ CORRECT - Hook in custom hook
function useCartTotal(cart) {
  const [total, setTotal] = useState(0); // ✅ In custom hook
  return total;
}

3. Custom Hooks Must Start with "use"

// ❌ WRONG - Doesn't start with "use"
function fetchProducts() {
  const [products, setProducts] = useState([]); // ❌ React can't detect this
}

// ✅ CORRECT
function useProducts() {
  const [products, setProducts] = useState([]); // ✅ React knows it's a hook
}

Real POS Example: Complete Hook Setup

Here's how I organize hooks in the POS system:

// hooks/index.ts - Barrel export
export { useProducts } from './useProducts';
export { useCart } from './useCart';
export { useAuth } from './useAuth';
export { useLocalStorage } from './useLocalStorage';
export { useDebounce } from './useDebounce';
export { useOrders } from './useOrders';

// Using multiple hooks together
// pages/CheckoutPage.tsx
import { useProducts, useCart, useAuth } from '../hooks';

function CheckoutPage() {
  const { user } = useAuth();
  const { products, loading: productsLoading } = useProducts();
  const { 
    cart, 
    addToCart, 
    removeFromCart, 
    total 
  } = useCart();
  
  if (productsLoading) return <div>Loading...</div>;
  
  return (
    <div className="checkout-page">
      <header>
        <h1>Welcome, {user?.name}</h1>
      </header>
      
      <div className="products">
        {products.map(product => (
          <ProductCard 
            key={product.id}
            product={product}
            onAdd={() => addToCart(product)}
          />
        ))}
      </div>
      
      <div className="cart">
        {cart.map(item => (
          <CartItem 
            key={item.productId}
            item={item}
            onRemove={() => removeFromCart(item.productId)}
          />
        ))}
        <div>Total: {total} MMK</div>
      </div>
    </div>
  );
}

Common Mistakes to Avoid

1. Not Following Hook Rules

// ❌ Conditional hook call
if (needsProducts) {
  const { products } = useProducts();
}

2. Forgetting Dependencies

// ❌ Missing searchTerm dependency
useEffect(() => {
  fetch(`/api/products?search=${searchTerm}`);
}, []); // Should include searchTerm!

3. Not Using useCallback for Functions

// ❌ New function on every render
const addToCart = (product) => {
  setCart([...cart, product]);
};

// ✅ Stable function reference
const addToCart = useCallback((product) => {
  setCart(prev => [...prev, product]);
}, []);

4. Overusing Custom Hooks

// ❌ Hook for everything
function useButtonClick() {
  const [clicked, setClicked] = useState(false);
  return { clicked, onClick: () => setClicked(true) };
}

// ✅ Just use state directly - too simple for a hook

Key Learnings

1. Custom hooks extract reusable stateful logic

2. Name must start with "use" (useProducts, useCart)

3. Can use other hooks (useState, useEffect, other custom hooks)

4. Follow Rules of Hooks (top level, React functions only)

5. Return values that make sense for the hook's purpose

6. Use useCallback for stable function references

7. Compose hooks to build powerful abstractions

8. Don't overuse - simple state can stay in components

Next Steps

You've mastered custom hooks for organizing logic. But the POS isn't a single page—it has products, cart, checkout, and order history screens. How do you navigate between them? In the next article, we'll add React Router to build a multi-page navigation system with protected routes.

Continue to: Routing →