Chapter 13: React Hooks Complete Guide

1. Why Hooks Were Created & The Two Golden Rules

Prior to Hooks, React applications suffered from severe architectural friction:

• `this` Keyword Confusion: Binding event handlers in constructors (this.handleClick = this.handleClick.bind(this)) caused constant scoping bugs and made code verbosely complicated.
• Lifecycle Fragmentation: Logic related to a single feature (e.g., setting up a timer and clearing it) had to be split awkwardly across componentDidMount and componentWillUnmount.
• Wrapper Hell: Sharing stateful logic required complex patterns like Higher-Order Components (HOCs) and Render Props, deeply nesting the component tree in an unreadable hierarchy.

2. The Core Hooks: useState, useEffect & useContext

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(prev => prev + 1)}>
      Clicked {count} times
    </button>
  );
}

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 1. Setup an AbortController for clean cancellation
    const controller = new AbortController();

    async function loadUser() {
      try {
        const res = await fetch(`/api/users/${userId}`, { signal: controller.signal });
        const data = await res.json();
        setUser(data);
      } catch (err) {
        if (err.name !== 'AbortError') console.error(err);
      }
    }

    loadUser();

    // 2. Cleanup function: Aborts pending network request if userId changes or component unmounts
    return () => controller.abort();
  }, [userId]); // Dependency array: effect re-runs only when userId changes

  return <div>{user ? user.name : "Loading..."}</div>;
}

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

const ThemeContext = createContext('light');

function ThemeToggle() {
  const theme = useContext(ThemeContext);
  return <div className={`app-theme-${theme}`}>Current Theme: {theme}</div>;
}

3. Advanced Hooks: useReducer & useRef

function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return [...state, action.payload];
    case 'CLEAR':
      return [];
    default:
      return state;
  }
}

// In Component:
const [cart, dispatch] = useReducer(cartReducer, []);
// dispatch({ type: 'ADD_ITEM', payload: product });

function AutoFocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    // Focus the HTML input on mount
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} placeholder="Type here..." />;
}

4. Performance Optimization Hooks: useMemo & useCallback

In JavaScript, functions and objects declared inside a component function are re-created with new memory references on every render. When passing them down to child components wrapped in React.memo, this can cause unnecessary child re-renders.

// Only recalculates when 'items' or 'filter' changes
const visibleItems = useMemo(() => {
  return items.filter(item => item.category === filter);
}, [items, filter]);

// Retains identical memory reference across renders
const handleDelete = useCallback((id) => {
  setItems(prev => prev.filter(item => item.id !== id));
}, []); // Empty deps: stable forever

5. Authoring Production Custom Hooks

Custom hooks allow you to package stateful logic into reusable, shareable functions. Here is an industry-standard useDebounce hook that delays search queries until the user stops typing:

import { useState, useEffect } from 'react';

// Custom Hook: useDebounce
export function useDebounce(value, delay = 300) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    // Set timer to update value after the delay
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Cancel timer if value changes before delay finishes
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

// How to use it in any component:
function LiveSearch() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 500);

  useEffect(() => {
    if (debouncedQuery) {
      console.log("Triggering expensive API search for:", debouncedQuery);
    }
  }, [debouncedQuery]);

  return (
    <input 
      type="text" 
      value={query} 
      onChange={(e) => setQuery(e.target.value)} 
      placeholder="Type to search..." 
    />
  );
}

Frequently Asked Questions (FAQ)