Reusing logic with custom hooks

Two components with the same fifteen lines

A shop should tell people when their network drops, so nobody pays for an order that never arrives. This cart page does it in two places: a banner at the top, and a Checkout button that waits for the network. Each component keeps its own copy of the online status, with the state and Effect you know from Synchronizing with effects. The NetworkButtons.jsx tab adds two buttons that fire the same offline and online events the browser fires when your network drops and comes back. Click Go offline, then Go online.

1import { useEffect, useState } from "react";2import NetworkButtons from "./NetworkButtons.jsx";3 4function OfflineBanner() {5  const [isOnline, setIsOnline] = useState(true);6  useEffect(() => {7    function handleOnline() {8      setIsOnline(true);9    }10    function handleOffline() {11      setIsOnline(false);12    }13    window.addEventListener("online", handleOnline);14    window.addEventListener("offline", handleOffline);15    return () => {16      window.removeEventListener("online", handleOnline);17      window.removeEventListener("offline", handleOffline);18    };19  }, []);20 21  if (isOnline) return null;22  return <p><strong>You're offline.</strong> Your cart is saved on this device.</p>;23}24 25function CheckoutButton() {26  const [isOnline, setIsOnline] = useState(true);27  useEffect(() => {28    function handleOnline() {29      setIsOnline(true);30    }31    function handleOffline() {32      setIsOnline(false);33    }34    window.addEventListener("online", handleOnline);35    window.addEventListener("offline", handleOffline);36    return () => {37      window.removeEventListener("online", handleOnline);38      window.removeEventListener("offline", handleOffline);39    };40  }, []);41 42  return <button disabled={!isOnline}>{isOnline ? "Checkout" : "Waiting for the network..."}</button>;43}44 45export default function App() {46  return (47    <>48      <OfflineBanner />49      <h3>Your cart: Tea, Cake</h3>50      <CheckoutButton />51      <NetworkButtons />52    </>53  );54}

In OfflineBanner, line 5 keeps isOnline in state, starting as true. The Effect on lines 6 to 19 listens for the window's online and offline events (lines 13 and 14), and its handlers on lines 7 to 12 set the state. The cleanup on lines 15 to 18 removes both listeners. Line 21 shows nothing while the page is online.

CheckoutButton repeats the same fifteen lines, 26 to 40, and line 42 turns the button off while the page is offline. Click Go offline: the banner appears and the button says Waiting for the network.... Both work. But a fix in one copy has to be made in the other, and a third component, like a "Save for later" button, would need a third copy.

React lets you give this logic a name and write it once. A custom hook is your own function that calls React's hooks, like useState and useEffect. Here it would be useOnlineStatus(), and each component would call it in one line:

Extract a custom hook, step by step

Moving the repeated lines into a hook takes five steps. Nothing about what the page does changes; only where the code lives.

1. Name a function use plus a capital letter: useOnlineStatus. The name tells you, and React's linter, that this function calls hooks, so the rules of hooks apply to it.
2. Move the state and the Effect into it, as they are. Lines 5 to 19 of OfflineBanner become lines 4 to 18 of the hook.
3. Return what the component needs to draw. Here that's one value, isOnline. A hook can return anything: a value, an array like useState does, or an object.
4. Call it at the top level of each component, in place of the lines you moved: const isOnline = useOnlineStatus();.
5. Put it in its own file and export it, so any component can import it.

Here is the hook. It runs in the live example below, as the useOnlineStatus.js tab:

import { useEffect, useState } from "react";

export function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }
    function handleOffline() {
      setIsOnline(false);
    }
    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);
    return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, []);
  return isOnline;
}

Line 3 names the hook and exports it. Line 4 is the state, and lines 5 to 18 are the Effect, unchanged, character for character. Line 19 returns isOnline, and that's the only new line. And here are the two components, now calling it:

1import { useOnlineStatus } from "./useOnlineStatus.js";2import NetworkButtons from "./NetworkButtons.jsx";3 4function OfflineBanner() {5  const isOnline = useOnlineStatus();6  if (isOnline) return null;7  return <p><strong>You're offline.</strong> Your cart is saved on this device.</p>;8}9 10function CheckoutButton() {11  const isOnline = useOnlineStatus();12  return <button disabled={!isOnline}>{isOnline ? "Checkout" : "Waiting for the network..."}</button>;13}14 15export default function App() {16  return (17    <>18      <OfflineBanner />19      <h3>Your cart: Tea, Cake</h3>20      <CheckoutButton />21      <NetworkButtons />22    </>23  );24}

Line 1 imports the hook. Line 5 and line 11 call it, and each component is back to saying only what it shows. Click Go offline and Go online: the page behaves exactly as before. Reading OfflineBanner now, you see what it needs, the online status, not how the browser reports it.

A custom hook isn't a special React feature. It's a plain JavaScript function. When OfflineBanner calls useOnlineStatus(), the useState and useEffect inside run as part of OfflineBanner's render, exactly as if they were still written in it. React can't even tell the difference.

Hooks share logic, not state

Both components show the same online status, so it's easy to think they share one isOnline. They don't. Each call to useOnlineStatus() made its own state and its own Effect, and both happen to agree because both listen to the same browser events. A hook that keeps state the user changes makes this easy to see. This one keeps a value in state and copies it into localStorage, so the page remembers it:

import { useEffect, useState } from "react";

export function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved === null ? initialValue : JSON.parse(saved);
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

Lines 4 to 7 make the state. Passing a function to useState means React calls it only for the first render: line 5 reads the saved text, and line 6 uses it, turned back into a value with JSON.parse, or initialValue when nothing is saved yet. The Effect on lines 9 to 11 saves every new value. Line 13 returns the value and its setter, like useState does.

A shop page uses it twice: the header reads the theme, and a picker switches it. Both call useLocalStorage("theme", "light"). Click Switch theme, and read both lines.

1import { useLocalStorage } from "./useLocalStorage.js";2 3function ShopHeader() {4  const [theme] = useLocalStorage("theme", "light");5  return <h3>Shop header, drawn in the {theme} theme</h3>;6}7 8function ThemePicker() {9  const [theme, setTheme] = useLocalStorage("theme", "light");10  return (11    <p>12      Picker: <strong>{theme}</strong>{" "}13      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>Switch theme</button>14    </p>15  );16}17 18export default function App() {19  return (20    <>21      <ShopHeader />22      <ThemePicker />23    </>24  );25}

The picker says dark, but the header still says light. Line 4 and line 9 are two calls, so they made two separate theme states. Line 13 changed only the picker's, and the picker's Effect saved "dark" in localStorage. Nothing tells the header. Now press Run again above the result: both components start over, both read localStorage, and both say dark.

That's the rule: custom hooks share logic, not state. Each component that calls a hook gets a fresh copy of everything the hook keeps, like each cook's own pot. To make two components show one theme, keep one state and pass it down, as in Sharing state between components: call the hook once, in App, and give both components the theme as a prop. Try both ways in the playground. Click Switch theme, then Run again, in each version.

1import { useLocalStorage } from "./useLocalStorage.js";2 3function ShopHeader() {4  const [theme] = useLocalStorage("theme", "light");5  return <h3>Shop header, drawn in the {theme} theme</h3>;6}7 8function ThemePicker() {9  const [theme, setTheme] = useLocalStorage("theme", "light");10  return (11    <p>12      Picker: <strong>{theme}</strong>{" "}13      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>Switch theme</button>14    </p>15  );16}17 18export default function App() {19  return (20    <>21      <ShopHeader />22      <ThemePicker />23    </>24  );25}

With each component calling the hook, the header falls behind after every switch, and catches up when the page starts again. With one call in App, there's one theme, and both parts change together. (When many components far apart need the same outside data, passing it down gets tiring. A store that lives outside React solves that; it's the subject of the next lesson, Subscribing to external stores.)

How to read the table: each row asks one question about the theme page, answered for both versions.

Pass values from one hook to the next

Because a hook is a function, you can give it arguments, and pass what one hook returns into another. A shop search shows how. It shouldn't ask the server on every key: typing tea would send three searches. So the search waits until you stop typing for a moment, which is called debouncing. Here are two hooks, one for each job:

import { useEffect, useState } from "react";
import { searchProducts } from "./api.js";

export function useDebouncedValue(value, delay) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
  return debounced;
}

export function useSearchResults(query) {
  const [results, setResults] = useState([]);
  useEffect(() => {
    let ignore = false;
    searchProducts(query).then((found) => {
      if (!ignore) setResults(found);
    });
    return () => {
      ignore = true;
    };
  }, [query]);
  return results;
}

useDebouncedValue (lines 4 to 11) keeps its own copy of a value. Each time the value changes, its Effect starts a timer on line 7 that copies it after delay milliseconds. If the value changes first, the cleanup on line 8 cancels the old timer, so only a value that stays put for the whole delay gets through.

useSearchResults (lines 13 to 25) asks the pretend server in api.js for the products matching query. It's the search with a cleanup from You might not need an effect: line 16 starts with ignore false, the cleanup on line 21 sets it to true, and line 18 only shows answers for the latest query. Now the page that uses both. Type tea quickly and watch the console under the result.

1import { useState } from "react";2import { useDebouncedValue, useSearchResults } from "./hooks.js";3 4export default function App() {5  const [query, setQuery] = useState("");6  const debouncedQuery = useDebouncedValue(query, 400);7  const results = useSearchResults(debouncedQuery);8 9  return (10    <>11      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search the shop" />12      <p>Results for "{debouncedQuery}":</p>13      <ul>14        {results.map((name) => (15          <li key={name}>{name}</li>16        ))}17      </ul>18    </>19  );20}

Line 5 keeps what you type. Line 6 passes query to useDebouncedValue, with a delay of 400 ms. Line 7 passes what that returns, debouncedQuery, to useSearchResults. The console shows Search: "" when the page starts (twice, because StrictMode runs Effects twice in development), and then only Search: "tea": one search, 400 ms after your last key. At that moment line 12 changes to Results for "tea":, and 300 ms later the list shows Green tea, Black tea, and Tea cups.

You didn't connect the two hooks with events or callbacks. The code of a custom hook runs every time its component renders, so on every render App calls both hooks again with the newest values, the way you'd call two functions. When debouncedQuery changes, useSearchResults receives the new value, and its Effect, which lists query, runs again.

A hook that takes a callback

Some hooks need to call your code back: when a timer fires, when a message arrives. Here is useInterval, a hook that calls onTick every delay milliseconds. It logs when it starts and stops its timer, so you can see it work:

import { useEffect } from "react";

export function useInterval(onTick, delay) {
  useEffect(() => {
    console.log("Start the timer");
    const id = setInterval(onTick, delay);
    return () => {
      console.log("Stop the timer");
      clearInterval(id);
    };
  }, [onTick, delay]);
}

Line 6 starts the timer with setInterval, and the cleanup on lines 7 to 10 stops it. Line 11 lists both values the Effect reads, as the linter asks: onTick and delay. A note box uses it to save your note every 2 seconds. Type a word slowly, about one letter a second, and watch the console.

1import { useState } from "react";2import { useInterval } from "./useInterval.js";3 4export default function App() {5  const [note, setNote] = useState("");6  const [saved, setSaved] = useState("");7 8  useInterval(() => {9    if (note !== saved) {10      setSaved(note);11      console.log(`Saved "${note}"`);12    }13  }, 2000);14 15  return (16    <>17      <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note for the courier" />18      <p>Last saved: "{saved}"</p>19    </>20  );21}

Lines 8 to 13 pass useInterval a function that saves the note if it changed. Every letter you type logs Stop the timer and Start the timer, and nothing saves until you stop typing for 2 seconds. Here's why. Each letter changes note, so App renders again, and line 8 creates a new arrow function. onTick is a dependency, and it changed, so the Effect stops the timer and starts a new one, from zero. While you type, the 2 seconds never pass.

The hook only needs to read the latest onTick when the timer fires. A new callback is no reason to restart. That's the job of an Effect Event, from Separating events from effects. Wrap the callback in useEffectEvent inside the hook:

import { useEffect, useEffectEvent } from "react";

export function useInterval(onTick, delay) {
  const tick = useEffectEvent(onTick);
  useEffect(() => {
    console.log("Start the timer");
    const id = setInterval(() => tick(), delay);
    return () => {
      console.log("Stop the timer");
      clearInterval(id);
    };
  }, [delay]);
}

Line 4 wraps onTick in an Effect Event called tick. Line 7 calls tick() when the timer fires, and it always runs the newest callback, with the newest note. Line 12 lists only delay. Here is the same note box with this useInterval.js. Type slowly again.

1import { useState } from "react";2import { useInterval } from "./useInterval.js";3 4export default function App() {5  const [note, setNote] = useState("");6  const [saved, setSaved] = useState("");7 8  useInterval(() => {9    if (note !== saved) {10      setSaved(note);11      console.log(`Saved "${note}"`);12    }13  }, 2000);14 15  return (16    <>17      <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note for the courier" />18      <p>Last saved: "{saved}"</p>19    </>20  );21}

The console shows Start the timer only when the page starts, and then a Saved line every 2 seconds while your note keeps changing. App didn't change at all: the fix lives in the hook, and every component that calls useInterval gets it. Code written before React 19.2 often does the same with a ref that holds the latest callback; useEffectEvent is the way to do it now.

Keep the Effect Event inside the hook, next to its Effect. The component passes a plain function, like onTick, and the hook wraps it. Never pass an Effect Event out of a hook, or into one.

Names, and when a hook is worth writing

A hook's name follows two rules. It starts with use, then a capital letter: useOnlineStatus, not useonlineStatus. And only functions that call hooks get it:

// No hooks inside: a plain function, named for what it returns.
function sortByPrice(products) {
  return [...products].sort((a, b) => a.price - b.price);
}

// Calls useState and useEffect: a hook, so its name starts with use.
function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const update = () => setWidth(window.innerWidth);
    window.addEventListener("resize", update);
    return () => window.removeEventListener("resize", update);
  }, []);
  return width;
}

sortByPrice on lines 2 to 4 only calculates, so it has a plain name, and you can call it anywhere, even in a loop or an if. useWindowWidth on lines 7 to 15 calls useState and useEffect, so it is a hook. The use prefix is a promise to readers and tools: React's linter checks the rules of hooks inside any function named use…, and wherever it's called. Naming sortByPrice useSortedProducts would forbid calling it in an if for no reason; leaving use off useWindowWidth would hide its rules.

Name a hook for what it does, not for when it runs. A common first try is a "lifecycle" hook, like useMount, which runs code once when a component appears. Here a product page uses one to log each visit. Click Cake and watch the console.

1import { useEffect, useState } from "react";2import { logVisit } from "./analytics.js";3 4function useMount(callback) {5  useEffect(() => {6    callback();7  }, []);8}9 10function ProductPage({ productId }) {11  useMount(() => {12    logVisit(productId);13  });14  return <h3>Product: {productId}</h3>;15}16 17export default function App() {18  const [productId, setProductId] = useState("tea");19  return (20    <>21      <button onClick={() => setProductId("tea")}>Tea</button>22      <button onClick={() => setProductId("cake")}>Cake</button>23      <ProductPage productId={productId} />24    </>25  );26}

The console shows Visit: tea when the page starts (twice in development), and then nothing when you click Cake, though the heading says Product: cake. Line 7 gives the Effect an empty array, so it runs only when ProductPage appears. The callback on lines 11 to 13 reads productId, but nothing tells the Effect: the linter flags callback missing from line 7, and people silence it, and at the call site the linter can't see the Effect at all. A hook named for its purpose keeps the dependency where the linter can check it:

1import { useEffect, useState } from "react";2import { logVisit } from "./analytics.js";3 4function usePageVisit(productId) {5  useEffect(() => {6    logVisit(productId);7  }, [productId]);8}9 10function ProductPage({ productId }) {11  usePageVisit(productId);12  return <h3>Product: {productId}</h3>;13}14 15export default function App() {16  const [productId, setProductId] = useState("tea");17  return (18    <>19      <button onClick={() => setProductId("tea")}>Tea</button>20      <button onClick={() => setProductId("cake")}>Cake</button>21      <ProductPage productId={productId} />22    </>23  );24}

usePageVisit on lines 4 to 8 takes productId and lists it on line 7. Click Cake: the console shows Visit: cake. Wrappers like useMount and useEffectOnce make you think in "when", and Effects work by "what to keep in sync", as in The lifecycle of an effect. Good hooks say what they keep in sync: useOnlineStatus, usePageVisit(productId), useChatRoom(roomId).

How to read the table: each row is something you might turn into a hook, whether to, and why.

A search page built from small hooks

In a real app, hooks you wrote for one page become building blocks for the next. This search page uses every hook from this lesson, unchanged, from one hooks.js. It remembers your last search across visits and warns you when you go offline. Type cake, press Run again, and click Go offline.

1import { useDebouncedValue, useLocalStorage, useOnlineStatus, useSearchResults } from "./hooks.js";2import NetworkButtons from "./NetworkButtons.jsx";3 4export default function App() {5  const isOnline = useOnlineStatus();6  const [query, setQuery] = useLocalStorage("last-search", "");7  const debouncedQuery = useDebouncedValue(query, 400);8  const results = useSearchResults(debouncedQuery);9 10  return (11    <>12      {!isOnline && <p><strong>You're offline.</strong> These results may be old.</p>}13      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search the shop" />14      <ul>15        {results.map((name) => (16          <li key={name}>{name}</li>17        ))}18      </ul>19      <NetworkButtons />20    </>21  );22}

Lines 5 to 8 read like a description of the page: know whether we're online, remember the last search, wait until typing stops, and fetch the results. After Run again, the box still says cake, because line 6 keeps the search in localStorage, and the console shows Search: "cake" straight away (twice, in development). Line 12 shows the banner while you're offline. Every hook keeps its own state for this page, and none of them knows about the others: line 7 passes line 6's value on, and line 8 passes line 7's.

Common mix-ups

• "Two components that call the same hook share its state." No. Each call makes its own state and Effects. In the theme page, the picker switched to dark and the header stayed light.
• "A custom hook is a special kind of React object." No. It's a plain function that calls hooks. React sees the hooks inside as if the component called them itself.
• "A custom hook runs once, like a setup step." No. Its code runs on every render of the component that calls it. Only its Effects skip runs, by their dependencies.
• "Every helper a component uses should start with use." No. Only functions that call hooks. sortByPrice and formatPrice are plain functions.
• "useMount makes Effects easier to read." No. It hides what the Effect reads from the linter, so a new productId was never logged. Name hooks for what they keep in sync.
• "A callback a hook receives must be in its dependency array." Only if a new callback should restart the Effect. Usually it shouldn't: wrap it in useEffectEvent inside the hook.

Practice exercises

Each exercise shows its result under the code, with the console under it. Press Edit & run to change the code, and the result runs again as you type. Make a guess first, then use the hints.

1import { useState } from "react";2 3function useQuantity(start) {4  const [quantity, setQuantity] = useState(start);5  return [quantity, () => setQuantity(quantity + 1)];6}7 8function ProductCard({ name }) {9  const [quantity, addOne] = useQuantity(1);10  return (11    <p>12      {name}: {quantity} <button onClick={addOne}>+1 {name}</button>13    </p>14  );15}16 17export default function App() {18  return (19    <>20      <ProductCard name="Tea" />21      <ProductCard name="Cake" />22    </>23  );24}

1import { useState } from "react";2 3function useQuantity(start) {4  const [quantity, setQuantity] = useState(start);5  return [quantity, () => setQuantity(quantity + 1)];6}7 8function ProductCard({ name }) {9  const [quantity, addOne] = useQuantity(1);10  return (11    <p>12      {name}: {quantity} <button onClick={addOne}>+1 {name}</button>13    </p>14  );15}16 17export default function App() {18  return (19    <>20      <ProductCard name="Tea" />21      <ProductCard name="Cake" />22    </>23  );24}

1import { useState } from "react";2 3function ProductDetails({ name, details }) {4  const [open, setOpen] = useState(false);5  function toggle() {6    setOpen(!open);7  }8  return (9    <div>10      <button onClick={toggle}>{open ? "Hide" : "Show"} {name} details</button>11      {open && <p>{details}</p>}12    </div>13  );14}15 16function ShippingInfo() {17  const [open, setOpen] = useState(false);18  function toggle() {19    setOpen(!open);20  }21  return (22    <div>23      <button onClick={toggle}>{open ? "Hide" : "Show"} shipping</button>24      {open && <p>Free shipping on orders over $20.</p>}25    </div>26  );27}28 29export default function App() {30  return (31    <>32      <ProductDetails name="Tea" details="Green tea from Assam, 100 g." />33      <ShippingInfo />34    </>35  );36}

1import { useState } from "react";2 3function useToggle(initialValue) {4  const [open, setOpen] = useState(initialValue);5  function toggle() {6    setOpen(!open);7  }8  return [open, toggle];9}10 11function ProductDetails({ name, details }) {12  const [open, toggle] = useToggle(false);13  return (14    <div>15      <button onClick={toggle}>{open ? "Hide" : "Show"} {name} details</button>16      {open && <p>{details}</p>}17    </div>18  );19}20 21function ShippingInfo() {22  const [open, toggle] = useToggle(false);23  return (24    <div>25      <button onClick={toggle}>{open ? "Hide" : "Show"} shipping</button>26      {open && <p>Free shipping on orders over $20.</p>}27    </div>28  );29}30 31export default function App() {32  return (33    <>34      <ProductDetails name="Tea" details="Green tea from Assam, 100 g." />35      <ShippingInfo />36    </>37  );38}

1import { useEffect, useState } from "react";2import { logVisit } from "./analytics.js";3 4function useMount(callback) {5  useEffect(() => {6    callback();7  }, []);8}9 10function ProductPage({ productId }) {11  useMount(() => {12    logVisit(productId);13  });14  return <h3>Product: {productId}</h3>;15}16 17export default function App() {18  const [productId, setProductId] = useState("tea");19  return (20    <>21      <button onClick={() => setProductId("tea")}>Tea</button>22      <button onClick={() => setProductId("cake")}>Cake</button>23      <ProductPage productId={productId} />24    </>25  );26}

1import { useEffect, useState } from "react";2import { logVisit } from "./analytics.js";3 4function usePageVisit(productId) {5  useEffect(() => {6    logVisit(productId);7  }, [productId]);8}9 10function ProductPage({ productId }) {11  usePageVisit(productId);12  return <h3>Product: {productId}</h3>;13}14 15export default function App() {16  const [productId, setProductId] = useState("tea");17  return (18    <>19      <button onClick={() => setProductId("tea")}>Tea</button>20      <button onClick={() => setProductId("cake")}>Cake</button>21      <ProductPage productId={productId} />22    </>23  );24}

1import { useState } from "react";2import { useSearchResults } from "./hooks.js";3 4export default function App() {5  const [query, setQuery] = useState("");6  const results = useSearchResults(query);7 8  return (9    <>10      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search the shop" />11      <ul>12        {results.map((name) => (13          <li key={name}>{name}</li>14        ))}15      </ul>16    </>17  );18}

1import { useState } from "react";2import { useDebouncedValue, useSearchResults } from "./hooks.js";3 4export default function App() {5  const [query, setQuery] = useState("");6  const debouncedQuery = useDebouncedValue(query, 400);7  const results = useSearchResults(debouncedQuery);8 9  return (10    <>11      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search the shop" />12      <ul>13        {results.map((name) => (14          <li key={name}>{name}</li>15        ))}16      </ul>17    </>18  );19}

1import { useLocalStorage } from "./useLocalStorage.js";2 3function ShopHeader() {4  const [theme] = useLocalStorage("theme", "light");5  return <h3>Shop header, drawn in the {theme} theme</h3>;6}7 8function ThemePicker() {9  const [theme, setTheme] = useLocalStorage("theme", "light");10  return (11    <p>12      Picker: <strong>{theme}</strong>{" "}13      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>Switch theme</button>14    </p>15  );16}17 18export default function App() {19  return (20    <>21      <ShopHeader />22      <ThemePicker />23    </>24  );25}

1import { useLocalStorage } from "./useLocalStorage.js";2 3function ShopHeader({ theme }) {4  return <h3>Shop header, drawn in the {theme} theme</h3>;5}6 7function ThemePicker({ theme, onSwitch }) {8  return (9    <p>10      Picker: <strong>{theme}</strong>{" "}11      <button onClick={onSwitch}>Switch theme</button>12    </p>13  );14}15 16export default function App() {17  const [theme, setTheme] = useLocalStorage("theme", "light");18  return (19    <>20      <ShopHeader theme={theme} />21      <ThemePicker theme={theme} onSwitch={() => setTheme(theme === "light" ? "dark" : "light")} />22    </>23  );24}

1import { useState } from "react";2import { useInterval } from "./useInterval.js";3 4export default function App() {5  const [note, setNote] = useState("");6  const [saved, setSaved] = useState("");7 8  useInterval(() => {9    if (note !== saved) {10      setSaved(note);11      console.log(`Saved "${note}"`);12    }13  }, 2000);14 15  return (16    <>17      <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note for the courier" />18      <p>Last saved: "{saved}"</p>19    </>20  );21}

1import { useState } from "react";2import { useInterval } from "./useInterval.js";3 4export default function App() {5  const [note, setNote] = useState("");6  const [saved, setSaved] = useState("");7 8  useInterval(() => {9    if (note !== saved) {10      setSaved(note);11      console.log(`Saved "${note}"`);12    }13  }, 2000);14 15  return (16    <>17      <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note for the courier" />18      <p>Last saved: "{saved}"</p>19    </>20  );21}

Check your understanding

Key takeaways

• A custom hook is a function whose name starts with use and a capital letter, and that calls other hooks.
• To extract one, move the state and Effects into it unchanged, return what components need, and call it at the top level.
• Hooks share logic, not state. Each call gets its own state and Effects; to share state, call the hook once and pass it down.
• A hook's code runs on every render, so you can pass one hook's result into the next, and its body must stay pure.
• When a hook takes a callback for its Effect, wrap it in useEffectEvent inside the hook.
• Give use only to functions that call hooks, and name hooks for what they keep in sync, never useMount.

Coming next: Subscribing to external stores. It shows how components read data that lives outside React, like the network status or a shared store, with useSyncExternalStore.