Chapter 7: React Hooks

Hooks let you "hook into" React features like state and side effects from function components. They're the modern way to build React apps.

Note: React code can't run in the browser playground, so these are read-only demonstrations. Study the patterns carefully — you'll use them in every React project!

useState

useEffect

useRef

useContext

Custom Hooks

Quiz

useState

useState is like a whiteboard in your room. You write something on it (initial value), and whenever you erase and write something new (call the setter), everyone looking at the whiteboard (the component) sees the update immediately. React re-renders the component every time the whiteboard changes.

useState is the most fundamental hook. It lets a component remember values between renders:

React — useState Basics (Read-Only)

import { useState } from 'react';

function TodoApp() {
    const [todos, setTodos] = useState([]);        // Array state
    const [input, setInput] = useState('');         // String state

    function addTodo() {
        if (input.trim()) {
            setTodos([...todos, { text: input, done: false }]);
            setInput('');  // Clear input after adding
        }
    }

    function toggleTodo(index) {
        const updated = todos.map((todo, i) =>
            i === index ? { ...todo, done: !todo.done } : todo
        );
        setTodos(updated);
    }

    return ( /* JSX here */ );
}

useState Patterns

React — useState Patterns (Read-Only)

import { useState } from 'react';

function Examples() {
    // Different types of state
    const [count, setCount] = useState(0);              // Number
    const [name, setName] = useState('');                // String
    const [isOpen, setIsOpen] = useState(false);         // Boolean
    const [items, setItems] = useState([]);              // Array
    const [user, setUser] = useState({ name: '', age: 0 }); // Object

    // IMPORTANT: Always create NEW arrays/objects, never mutate!
    // BAD:  items.push(newItem); setItems(items);    // Won't re-render!
    // GOOD: setItems([...items, newItem]);            // New array = re-render!

    // BAD:  user.name = "Rahul"; setUser(user);      // Won't re-render!
    // GOOD: setUser({ ...user, name: "Rahul" });     // New object = re-render!

    // Functional update (when new state depends on previous state)
    // Instead of: setCount(count + 1)
    // Safer:      setCount(prev => prev + 1)
    // This ensures you always have the latest value
    return ( /* JSX here */ );
}

Never mutate state directly! Always use the setter function and create new arrays/objects with the spread operator (...). Direct mutation won't trigger a re-render, so your UI won't update.

useEffect

useEffect is like setting an alarm clock. You tell it: "after the component appears on screen (or after something changes), DO THIS." It's for side effects — things that happen OUTSIDE of rendering, like fetching data, starting timers, or updating the document title.

React — useEffect Basics (Read-Only)

import { useState, useEffect } from 'react';

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

    // useEffect runs AFTER the component renders
    useEffect(() => {
        // Fetch user data when userId changes
        async function fetchUser() {
            setLoading(true);
            const response = await fetch(
                `https://jsonplaceholder.typicode.com/users/${userId}`
            );
            const data = await response.json();
            setUser(data);
            setLoading(false);
        }
        fetchUser();
    }, [userId]);  // <-- Dependency array: re-run when userId changes

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

    return (
        <div>
            <h2>{user.name}</h2>
            <p>{user.email}</p>
        </div>
    );
}

The Dependency Array

Dependency Array	When Effect Runs	Analogy
`useEffect(fn)` — no array	After EVERY render	Alarm that rings every minute
`useEffect(fn, [])` — empty array	Only once (on mount)	Alarm that rings once when you wake up
`useEffect(fn, [a, b])` — with values	When a or b changes	Alarm that rings when specific things change

Cleanup Function

React — useEffect Cleanup (Read-Only)

import { useState, useEffect } from 'react';

function Timer() {
    const [seconds, setSeconds] = useState(0);

    useEffect(() => {
        // Start a timer
        const intervalId = setInterval(() => {
            setSeconds(prev => prev + 1);
        }, 1000);

        // CLEANUP: runs when component unmounts or before re-running
        return () => {
            clearInterval(intervalId); // Stop the timer!
            console.log("Timer cleaned up!");
        };
    }, []); // Empty array = run once on mount

    return <h1>Timer: {seconds}s</h1>;
}

When to use cleanup: If your effect starts something ongoing (timer, subscription, event listener), always return a cleanup function to stop it. Otherwise, you'll have memory leaks and unexpected behavior.

useRef

useRef is like a sticky note attached to your desk. You can write something on it and it stays there between renders, but changing it does NOT cause a re-render (unlike state). It's also used to directly grab DOM elements, like sticking a name tag on a specific HTML element so you can find it later.

React — useRef (Read-Only)

import { useRef, useState } from 'react';

function SearchBox() {
    const inputRef = useRef(null);   // Reference to the input element
    const renderCount = useRef(0);   // Persists between renders, no re-render on change

    const [query, setQuery] = useState('');

    // Count renders (without causing extra renders!)
    renderCount.current += 1;

    function handleFocus() {
        // Directly access the DOM element
        inputRef.current.focus();
        inputRef.current.style.border = "2px solid blue";
    }

    return (
        <div>
            <input
                ref={inputRef}
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Search..."
            />
            <button onClick={handleFocus}>Focus Input</button>
            <p>Renders: {renderCount.current}</p>
        </div>
    );
}

// useRef is perfect for:
// 1. Accessing DOM elements (inputRef.current.focus())
// 2. Storing values that persist but DON'T trigger re-renders
// 3. Keeping track of previous values

useRef vs useState

Feature	useState	useRef
Triggers re-render?	Yes	No
Persists between renders?	Yes	Yes
Access via	Variable directly	`.current` property
Analogy	Whiteboard (everyone sees changes)	Sticky note (private, no announcement)
Use for	Data that affects UI	DOM access, timers, counters that don't affect UI

useContext

Imagine a family announcement system. Without Context, if grandpa wants to tell something to his great-grandchild, the message has to pass through every person in between (parent, child, grandchild). With useContext, grandpa puts the message on a family bulletin board and anyone in the family can read it directly — no passing needed!

Context solves the "prop drilling" problem — passing props through many layers of components:

React — useContext (Read-Only)

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

// Step 1: Create a Context (the bulletin board)
const ThemeContext = createContext();

// Step 2: Create a Provider (puts data on the bulletin board)
function ThemeProvider({ children }) {
    const [theme, setTheme] = useState('light');

    function toggleTheme() {
        setTheme(prev => prev === 'light' ? 'dark' : 'light');
    }

    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    );
}

// Step 3: Any child component can READ the context
function Header() {
    const { theme, toggleTheme } = useContext(ThemeContext);
    return (
        <header style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
            <h1>Theme: {theme}</h1>
            <button onClick={toggleTheme}>Toggle Theme</button>
        </header>
    );
}

// Usage in App
function App() {
    return (
        <ThemeProvider>
            <Header />      {/* Can access theme directly! */}
            <MainContent />  {/* Can also access theme! */}
            <Footer />       {/* No prop drilling needed! */}
        </ThemeProvider>
    );
}

Common uses for Context: Theme (dark/light mode), user authentication (logged in user), language/locale, and any data that many components need access to.

Custom Hooks

Custom hooks are like creating your own power tools. Instead of repeating the same sequence of useState + useEffect in every component, you package that logic into a reusable function. The rule: custom hook names must start with use.

React — Custom Hooks (Read-Only)

import { useState, useEffect } from 'react';

// Custom hook: useFetch — reusable data fetching logic
function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        async function fetchData() {
            try {
                setLoading(true);
                const response = await fetch(url);
                if (!response.ok) throw new Error('Failed to fetch');
                const json = await response.json();
                setData(json);
            } catch (err) {
                setError(err.message);
            } finally {
                setLoading(false);
            }
        }
        fetchData();
    }, [url]);

    return { data, loading, error };  // Return what components need
}

// Now ANY component can fetch data in one line!
function UserList() {
    const { data: users, loading, error } = useFetch(
        'https://jsonplaceholder.typicode.com/users'
    );

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error: {error}</p>;

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

Hook Rules

Rules of Hooks (never break these!):
1. Only call hooks at the top level — never inside loops, conditions, or nested functions
2. Only call hooks from React function components or custom hooks
3. Custom hook names must start with "use" (e.g., useFetch, useAuth, useLocalStorage)

Popular Custom Hook Ideas

Hook Name	What It Does
`useFetch(url)`	Fetches data and returns { data, loading, error }
`useLocalStorage(key)`	Syncs state with localStorage
`useDebounce(value, delay)`	Delays updating a value (great for search)
`useWindowSize()`	Tracks browser window dimensions
`useAuth()`	Manages user authentication state

📝 Chapter 7 Quiz

1. When does useEffect(() => {}, []) run?

After every render

Only once, when the component mounts

Never — empty array means disabled

Before the component renders

2. What's the key difference between useRef and useState?

useRef is faster

useState can only hold numbers

Changing useRef does NOT trigger a re-render

useRef can only be used once per component

3. What problem does useContext solve?

Prop drilling (passing props through many layers)

Slow rendering

Memory leaks

API rate limiting

4. Which of these is NOT allowed with hooks?

Using multiple useState in one component

Creating custom hooks

Using useEffect with a dependency array

Calling useState inside an if-statement

5. What must a custom hook's name start with?

hook

use

custom

react

← Chapter 6: React Fundamentals Chapter 8: React Router →