Reusing logic with custom hooks

React comes with built-in hooks like useState, useEffect and useRef. Sometimes you wish there were one for a more specific job: "is the user online?", "store this in localStorage", "search books as I type". You can make those yourself.

A custom hook is a JavaScript function whose name starts with use and which calls other hooks. It lets you pull a chunk of stateful logic out of a component, give it a clear name, and reuse it anywhere.

Spotting repeated logicCopy Anchor Link

Imagine two components that both need to know whether the browser is online. Each one would need the same state and the same Effect subscribing to the browser's online and offline events. Instead of copying it, move it into a function:

Both components read like plain English now: "use the online status". The details of how it works are tucked away in one place. If you later find a better way to detect the network, you change one file.

The rules of hooksCopy Anchor Link

Custom hooks follow the same rules as built-in ones:

1. Names start with use followed by a capital letter, like useOnlineStatus or useLocalStorage. That is how React and the linter know the function may call hooks.
2. Call hooks only at the top level of a component or another hook. Never inside conditions, loops or nested functions. React relies on hooks being called in the same order on every render.
3. Call hooks only from React functions: components or other custom hooks, not regular functions.

Hooks share logic, not stateCopy Anchor Link

This is the most important idea in the lesson. Each call to a custom hook is completely independent. When StatusBar and SaveButton both call useOnlineStatus(), each gets its own isOnline state. They agree only because they watch the same browser events.

Let's prove it with the hook you'll use in your project. useLocalStorage works like useState, but it also saves the value in the browser's localStorage and reads it back when the page loads.

NameField and GoalField use the same hook but store completely separate values under separate keys. Notice the parts you already know:

• useState(() => ...) with a function is a lazy initializer. React only calls it on the first render, so you don't read localStorage on every keystroke.
• localStorage is an external system, so writing to it is a valid use of an Effect, with key and value as dependencies.
• Returning [value, setValue] means the hook is a drop-in replacement for useState, including updater functions like setValue((v) => v + 1).

import { useEffect, useState } from 'react';
import { searchBooks } from './api.js';

export function useBookSearch(query) {
  const [suggestions, setSuggestions] = useState([]);
  const [status, setStatus] = useState('idle');

  useEffect(() => {
    if (query.trim().length < 2) {
      setSuggestions([]);
      setStatus('idle');
      return;
    }
    let ignore = false;
    setStatus('loading');
    searchBooks(query)
      .then((books) => {
        if (!ignore) {
          setSuggestions(books);
          setStatus('done');
        }
      })
      .catch(() => {
        if (!ignore) setStatus('error');
      });
    return () => {
      ignore = true;
    };
  }, [query]);

  return { suggestions, status };
}

import { useState } from 'react';
import { useBookSearch } from './useBookSearch.js';

export default function SearchSuggestions() {
  const [query, setQuery] = useState('');
  const { suggestions, status } = useBookSearch(query);

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Find a book" />
      {status === 'loading' && <p>Searching...</p>}
      {status === 'error' && <p role="alert">Could not load suggestions.</p>}
      <ul>
        {suggestions.map((b) => (
          <li key={b.id}>
            {b.title} by {b.author}
          </li>
        ))}
      </ul>
    </>
  );
}

Project: persist the Reading ListCopy Anchor Link

Right now, refreshing the page throws away every book you added. Let's fix that with useLocalStorage.

There is one wrinkle: your books are managed by booksReducer through useReducer, and useLocalStorage behaves like useState. The neat trick is that a reducer is a plain function. You can apply it with any state setter, by passing an updater function:

const [books, setBooks] = useLocalStorage('reading-list:books', initialBooks);

function dispatch(action) {
  setBooks((currentBooks) => booksReducer(currentBooks, action));
}

This is very close to what useReducer does internally. Every dispatch({ type: 'added', book }) call in your components keeps working unchanged, and every change is saved to localStorage.

The reducer stayed pure and untouched. The hook handles persistence. Each piece does one job, which is exactly what you want as the app grows. On Day 5 you will move this state into a context provider so any page can reach it.