The rules of hooks

An order card that breaks when you place an order

Hooks are the functions whose names start with use: useState, useEffect, useRef and the rest. They come with two rules. Here is a card that breaks one of them. Before there is an order, it shows a short message; after, it shows the order with a star rating. It looks fine. Click Place an order.

1import { useState } from "react";2 3function OrderStatus({ order }) {4  const [showDetails, setShowDetails] = useState(false);5  if (order === null) {6    return <p>No order yet.</p>;7  }8 9  const [stars, setStars] = useState(0);10 11  return (12    <div>13      <p>Order {order.id}: {order.item}</p>14      <button onClick={() => setShowDetails(!showDetails)}>Details</button>15      {showDetails && <p>Arrives on Friday.</p>}16      <button onClick={() => setStars(stars + 1)}>Stars: {stars}</button>17    </div>18  );19}20 21export default function App() {22  const [order, setOrder] = useState(null);23 24  return (25    <div>26      <button onClick={() => setOrder({ id: 42, item: "Green tea" })}>Place an order</button>27      <OrderStatus order={order} />28    </div>29  );30}

The card disappears, and the result shows React's error instead: Rendered more hooks than during the previous render. Line 4 calls useState for the details. While there is no order, line 6 returns early, so the render never reaches the useState on line 9. After the click, it does. The first render called one hook and the second called two, and React can't cope with that. Before the error, the console also shows a warning from React, with a table of the hooks:

React has detected a change in the order of Hooks called by OrderStatus. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://react.dev/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useState                   useState
2. undefined                  useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Read the table row by row. In the previous render, hook 1 was a useState and there was no hook 2 (undefined). In the next render, hook 2 is a useState. React numbers the hooks, because the order they are called in is the only way it can tell them apart.

The fix is to move the hook above the early return, so every render calls both:

1import { useState } from "react";2 3function OrderStatus({ order }) {4  const [showDetails, setShowDetails] = useState(false);5  const [stars, setStars] = useState(0);6 7  if (order === null) {8    return <p>No order yet.</p>;9  }10 11  return (12    <div>13      <p>Order {order.id}: {order.item}</p>14      <button onClick={() => setShowDetails(!showDetails)}>Details</button>15      {showDetails && <p>Arrives on Friday.</p>}16      <button onClick={() => setStars(stars + 1)}>Stars: {stars}</button>17    </div>18  );19}20 21export default function App() {22  const [order, setOrder] = useState(null);23 24  return (25    <div>26      <button onClick={() => setOrder({ id: 42, item: "Green tea" })}>Place an order</button>27      <OrderStatus order={order} />28    </div>29  );30}

Lines 4 and 5 now run on every render, order or no order, and only then does line 7 decide what to show. Click Place an order, then Stars and Details: each keeps its own value.

Call hooks at the top level

The top level of a component is its own body: the lines that run every time React calls it, before any return. A hook written there runs on every render, in the same place. Anywhere else, it might run on some renders and not others, or a different number of times. This component, which doesn't run, puts a useState in each place a hook can't go:

function SearchBox({ open }) {
  if (open) {
    const [query, setQuery] = useState(""); // In a condition
  }

  for (const tab of ["Tea", "Cake"]) {
    const [count, setCount] = useState(0); // In a loop
  }

  function handleClick() {
    const [clicked, setClicked] = useState(false); // In an event handler
  }

  const total = useMemo(() => {
    const [discount] = useState(0); // In a function passed to another hook
    return 4 - discount;
  }, []);

  try {
    const [saved, setSaved] = useState(false); // In a try block
  } catch {
    // Nothing here.
  }

  if (!open) return null;
  const [page, setPage] = useState(1); // After an early return
}

Line 3 runs only when open is true, and line 7 runs once per tab. Line 11 runs only when someone clicks, long after the render. Line 15 runs whenever useMemo decides to call its function. Line 20 is inside a try block, and line 26 comes after an early return, so it only runs while open is true.

You never need a hook in those places, because the thing you wanted to make conditional can go somewhere else. The most common fix is to call the hook every time and put the condition inside it. This cart saves itself, but not while it's empty. Click Add to cart twice.

1import { useEffect, useState } from "react";2 3export default function App() {4  const [items, setItems] = useState(0);5 6  useEffect(() => {7    if (items === 0) return;8    console.log("Saved the cart, items:", items);9  }, [items]);10 11  return <button onClick={() => setItems(items + 1)}>Add to cart ({items})</button>;12}

The Effect on lines 6 to 9 is called on every render, so React always finds it in the same place. Line 7 is the condition: an ordinary if inside the Effect's function, which returns early while items is 0. The console stays empty at first, then logs Saved the cart, items: 1 and Saved the cart, items: 2.

For a loop, give each item a component of its own. A useState inside map() would make the number of hooks follow the number of items:

<ul>
  {items.map((name) => {
    const [quantity, setQuantity] = useState(1); // Not allowed: a hook in a loop
    return <li key={name}>{name} × {quantity}</li>;
  })}
</ul>

Here each cart line is a CartLine component instead, with its own useState at its top level:

1import { useState } from "react";2 3function CartLine({ name }) {4  const [quantity, setQuantity] = useState(1);5 6  return (7    <li>8      {name} × {quantity} <button onClick={() => setQuantity(quantity + 1)}>Add one {name}</button>9    </li>10  );11}12 13export default function App() {14  const items = ["Green tea", "Carrot cake", "Lemonade"];15 16  return (17    <ul>18      {items.map((name) => <CartLine key={name} name={name} />)}19    </ul>20  );21}

Line 4 is the top level of CartLine, and line 18 renders one CartLine per item, each with a key. Every copy has its own list of hooks with one hook in it, so the list never changes length. Click Add one Carrot cake: only that line goes up. Each row of this table is a place you might be tempted to call a hook, and what to do instead.

Call hooks only from components and hooks

React keeps a list of hooks only while it is rendering a function component. A hook called at any other time has no list to go into. An event handler is the usual way this happens. Click Add a cup of tea and read the console.

1import { useState } from "react";2 3export default function App() {4  function handleAdd() {5    const [cups, setCups] = useState(0);6    setCups(cups + 1);7  }8 9  return <button onClick={handleAdd}>Add a cup of tea</button>;10}

handleAdd runs on line 9's click, after the render has finished. Line 5 calls useState then, with no render to answer it, and React throws an error that starts Invalid hook call. Hooks can only be called inside of the body of a function component. and lists possible reasons; the second is "You might be breaking the Rules of Hooks". The result shows that error in place of the button. The fix keeps the state at the top, and the handler only uses its set function:

1import { useState } from "react";2 3export default function App() {4  const [cups, setCups] = useState(0);5 6  function handleAdd() {7    setCups(cups + 1);8  }9 10  return <button onClick={handleAdd}>Add a cup of tea ({cups})</button>;11}

Line 4 calls useState while rendering. Line 7 calls setCups, which is a plain function, not a hook, so the handler may call it whenever it likes. Click the button: the count goes up.

Which functions count as components and hooks? React and its tools go by the name. A component is a function whose name starts with a capital letter, like ProductCard, that React calls when you write <ProductCard />. A hook is a function whose name is use followed by a capital letter or a number, like useState or useCart. You can write hooks of your own, called custom hooks, and a custom hook may call other hooks at its own top level; the next lesson, Reusing logic with custom hooks, is about them. Name a function use… only if it calls hooks: the name tells people, and the linter, that its calls follow these rules.

How to read the table: each row is a function, what React sees in it, and whether it may call hooks.

Why the order of calls matters

In State: a component's memory you saw that useState doesn't say which state it wants, and React doesn't read your variable names. For each copy of each component, React keeps a list, and the first hook call on every render gets the first saved value. Here is that idea as a small model in plain JavaScript, written for this lesson. It isn't React's code, but it does the same two checks React does. Press Edit & run to see it print.

// A small model of React's list of hooks for one component.
let saved = []; // the hooks from the last render, in order
let calls = []; // the hooks called in this render, in order

function useHook(kind, initial) {
  const index = calls.length;
  const old = saved[index];
  if (saved.length > 0 && old === undefined) {
    throw new Error("Rendered more hooks than during the previous render.");
  }
  if (old && old.kind !== kind) {
    console.log(`Warning: hook ${index + 1} was ${old.kind}, now ${kind}`);
  }
  calls.push({ kind, value: old ? old.value : initial });
  return calls[index].value;
}

function render(component, props) {
  calls = [];
  const shown = component(props);
  if (calls.length < saved.length) {
    throw new Error("Rendered fewer hooks than expected.");
  }
  saved = calls;
  return shown;
}

function DeliveryField({ pickup }) {
  if (pickup) {
    const store = useHook("useState", "Pune store");
    return `Store: ${store}`;
  }
  const address = useHook("useState", "12 Park Street");
  return `Address: ${address}`;
}

console.log(render(DeliveryField, { pickup: false }));
console.log(render(DeliveryField, { pickup: true }));

Lines 2 and 3 hold the hooks saved from the last render and the hooks called in this one. useHook (lines 5 to 16) takes the next place in the list, line 6. Line 8 is React's first check: after the first render, a call with nothing saved at its place stops the render. Lines 14 and 15 store and return the saved value, or the starting value on the first render. render (lines 18 to 26) starts an empty list, calls the component, and does React's second check on line 21: fewer calls than last time also stops the render.

DeliveryField on lines 28 to 35 calls one hook in each branch. Line 37 renders it for delivery and prints Address: 12 Park Street. Line 38 renders it for pickup, and prints Store: 12 Park Street. Neither check fires: both renders made one useState call, so the store simply took the address from place 1. Now try real React: tick Pick up in store.

1import { useState } from "react";2 3function DeliveryField({ pickup }) {4  if (pickup) {5    const [store] = useState("Pune store");6    return <p>Store: {store}</p>;7  }8  const [address] = useState("12 Park Street");9  return <p>Address: {address}</p>;10}11 12export default function App() {13  const [pickup, setPickup] = useState(false);14 15  return (16    <div>17      <label>18        <input type="checkbox" checked={pickup} onChange={(e) => setPickup(e.target.checked)} /> Pick up in store19      </label>20      <DeliveryField pickup={pickup} />21    </div>22  );23}

The page says Store: 12 Park Street, and the console stays empty: no warning, no error. Line 5's useState("Pune store") is the first hook call of this render, so React hands it the value saved at place 1 by line 8 in the first render. That quiet mix-up is the worst kind of bug the rules prevent, because nothing points at it.

In the model, press Edit & run and add useHook("useEffect"); on a new line after line 30. Now the pickup render calls two hooks after a render that saved one, and line 9 throws Rendered more hooks than during the previous render., the overview's error. Real React stops the render at line 1048 of ReactFiberHooks.js, with the same words.

When the kinds of hook differ too, React notices more. Pick the first and the next render below, and read what React finds at each place in GiftForm's list.

1function GiftForm({ gift }) {2  const [name, setName] = useState("Asha");3  if (gift) {4    const [message, setMessage] = useState("Happy birthday!");5  }6  const [city, setCity] = useState("Pune");7 8  useEffect(() => {9    document.title = `Order for ${name}`;10  });11 12  return <p>{name}, {city}</p>;13}

Gift off, then on: message gets the city's saved "Pune", and at place 3 city's useState meets the saved Effect. React warns, then throws Should have a queue. You are likely calling Hooks conditionally, which is not allowed. (https://react.dev/link/invalid-hook-call): an Effect keeps no state, so there is nothing for useState to read. Gift on, then off: city gets "Happy birthday!", React warns at place 3, and at the end it throws Rendered fewer hooks than expected. This may be caused by an accidental early return statement. Real React keeps this list as a chain of objects on each component's fiber; How hooks work inside reads that code.

use is the one you can call in a condition

React 19 added use, a function that reads a value from a context or a promise. Its name is the word use itself, and it is the one exception to the first rule: React's docs say it can be called inside conditions and loops. This price only reads the shop's currency once someone has signed in. Click Sign in.

1import { createContext, use, useState } from "react";2 3const CurrencyContext = createContext("$");4 5function Price({ amount, visible }) {6  if (!visible) {7    return <p>Sign in to see prices.</p>;8  }9  const currency = use(CurrencyContext);10  return <p>Green tea: {currency}{amount}</p>;11}12 13export default function App() {14  const [signedIn, setSignedIn] = useState(false);15 16  return (17    <CurrencyContext value="€">18      <button onClick={() => setSignedIn(!signedIn)}>{signedIn ? "Sign out" : "Sign in"}</button>19      <Price amount={4} visible={signedIn} />20    </CurrencyContext>21  );22}

Line 3 makes a context with "$" as its default, and line 17 provides "€". Price returns early on line 7 while you're signed out, and only then calls use(CurrencyContext) on line 9. The page shows Sign in to see prices., then Green tea: €4. Click Sign out and in again: no warning, no error.

Why is use allowed there? Because it doesn't take a place in the list of hooks. Here is the start of it, from ReactFiberHooks.js:

function use<T>(usable: Usable<T>): T {
  // $FlowFixMe[invalid-compare]
  if (usable !== null && typeof usable === 'object') {
    // $FlowFixMe[method-unbinding]
    if (typeof usable.then === 'function') {
      // This is a thenable.
      const thenable: Thenable<T> = usable as any;
      return useThenable(thenable);
    } else if (usable.$$typeof === REACT_RECOVERABLE_TYPE) {
      // Fiber is the final renderer, so there is no downstream host that
      // needs to recover this subtree. Continue rendering through it.
      return undefined as any;
    } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {
      const context: ReactContext<T> = usable as any;
      return readContext(context);
    }
  }

  // eslint-disable-next-line react-internal/safe-string-coercion
  throw new Error('An unsupported type was passed to use(): ' + String(usable));
}

For a promise (line 5), it waits for the promise's value; for a context (line 13), it reads the nearest provider's value with readContext, line 15. Line 9 is for the value browser() returns, new in React 19.3, which in the browser reads as nothing. None of these paths saves anything in the component's list of hooks, so skipping a call doesn't move any other hook. The second rule still holds: use reads while rendering, so call it only from components and hooks, and not inside a try block. Reading a promise with use needs Suspense; The use API covers both.

Let the linter check the rules

You don't have to spot these mistakes yourself. A linter reads your code and warns about likely mistakes as you type, and React's own ESLint plugin, eslint-plugin-react-hooks, checks the rules of hooks. When this lesson was checked, in October 2026, its latest version was 7.1.1. With ESLint's flat config, you add the plugin's recommended preset in eslint.config.js:

import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    files: ["**/*.{js,jsx}"],
    extends: [js.configs.recommended, reactHooks.configs.flat.recommended],
    languageOptions: {
      globals: globals.browser,
      parserOptions: { ecmaFeatures: { jsx: true } },
    },
  },
]);

Line 3 imports the plugin, and line 9 adds reactHooks.configs.flat.recommended to the settings for your .js and .jsx files; lines 10 to 13 tell ESLint about the browser and JSX. A Vite project with ESLint, from Setting up a React project, gets almost exactly this file. Vite's first choice of linter, Oxlint, turns on its own copy of the rule, react/rules-of-hooks, in .oxlintrc.json. Run npx eslint . on the order card from the overview, and ESLint reports:

src/App.jsx
  9:29  error  React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render  react-hooks/rules-of-hooks

✖ 1 problem (1 error, 0 warnings)

9:29 is line 9, column 29: the useState after the early return. Your editor shows the same message under the line as you type, so the bug never reaches the page. Each row of the table is a wrong place from the six-places example and what the rule says about it.

The rule doesn't mark a useState inside a try block, the one place in the list it misses, though React's docs still rule it out; it does mark use inside one. The preset has two classic rules: react-hooks/rules-of-hooks, an error, and react-hooks/exhaustive-deps, a warning, which checks dependency arrays as in Synchronizing with effects. Since version 7, recommended also turns on rules that come from the React Compiler, such as purity, refs, immutability, set-state-in-render and set-state-in-effect. They check React's other rules, like keeping components pure, and they work whether or not your app uses the Compiler. A preset called recommended-latest adds newer rules still being tried out.

When a rule complains, fix the code. A comment like // eslint-disable-next-line react-hooks/rules-of-hooks hides the message and keeps the bug.

A product page that follows the rules

A product page has all three temptations: a loading state that returns early, a page view to log only once the product has arrived, and reviews in a list, each with its own Helpful count. Click Load the product, then the buttons.

1import { useEffect, useState } from "react";2 3const reviews = [4  { id: 1, author: "Asha", text: "Lovely and fresh." },5  { id: 2, author: "Ravi", text: "My favourite green tea." },6];7 8function Review({ review }) {9  const [helpful, setHelpful] = useState(0);10  return (11    <li>12      {review.author}: {review.text} <button onClick={() => setHelpful(helpful + 1)}>Helpful ({helpful})</button>13    </li>14  );15}16 17function ProductPage({ product }) {18  const [quantity, setQuantity] = useState(1);19 20  useEffect(() => {21    if (product === null) return;22    console.log("Viewed", product.name);23  }, [product]);24 25  if (product === null) {26    return <p>Loading the product…</p>;27  }28 29  return (30    <div>31      <h3>{product.name}</h3>32      <button onClick={() => setQuantity(quantity + 1)}>Quantity: {quantity}</button>33      <ul>34        {reviews.map((review) => <Review key={review.id} review={review} />)}35      </ul>36    </div>37  );38}39 40export default function App() {41  const [product, setProduct] = useState(null);42 43  return (44    <div>45      <button onClick={() => setProduct({ name: "Green tea" })}>Load the product</button>46      <ProductPage product={product} />47    </div>48  );49}

Every hook in ProductPage comes first: useState on line 18 and the Effect on lines 20 to 23. The Effect checks for a product inside its function, on line 21, so the console logs Viewed Green tea only once it has loaded. Only then does line 25 return early while loading. Each review is a Review component (lines 8 to 15) with its own useState, and line 34 renders one per review. Click Helpful on Ravi's review: only his count goes up.

Common mix-ups

• "A hook in an if is fine as long as it works when I test it." No. It works until the condition changes between renders. Then React throws, or, worse, hands a hook another hook's value with no warning at all.
• "React matches hooks by their variable names." No. It never sees your names. The first call gets the first saved value, and so on.
• "An early return at the top is harmless." Only if every hook comes before it. A hook after an early return is a conditional hook.
• "Set functions are hooks too, so I can't call them in handlers." No. setCups is a plain function that useState gave you. Call it anywhere, any time.
• "Any function starting with use is a hook." Only use followed by a capital letter or a number, like useCart, or use itself. userName is a plain function.
• "use must follow every rule other hooks do." No. It can go in conditions and loops. It still has to be called while rendering a component or hook, and not inside try.

Practice exercises

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

import { useState } from "react";

function MenuItem({ name, soldOut }) {
  const [liked, setLiked] = useState(false);
  if (soldOut) {
    return <p>{name} is sold out.</p>;
  }
  const [quantity, setQuantity] = useState(1);
  return (
    <p>
      {name} × {quantity}{" "}
      <button onClick={() => setQuantity(quantity + 1)}>Add one</button>
      <button onClick={() => setLiked(!liked)}>{liked ? "Liked" : "Like"}</button>
    </p>
  );
}

export default function App() {
  return <MenuItem name="Lemonade" soldOut={false} />;
}

1import { useState } from "react";2 3function MenuItem({ name, soldOut }) {4  const [liked, setLiked] = useState(false);5  if (soldOut) {6    return <p>{name} is sold out.</p>;7  }8  const [quantity, setQuantity] = useState(1);9  return (10    <p>11      {name} × {quantity}{" "}12      <button onClick={() => setQuantity(quantity + 1)}>Add one</button>13      <button onClick={() => setLiked(!liked)}>{liked ? "Liked" : "Like"}</button>14    </p>15  );16}17 18export default function App() {19  return <MenuItem name="Lemonade" soldOut={false} />;20}

1import { useEffect, useState } from "react";2 3export default function App() {4  const [subscribed, setSubscribed] = useState(false);5 6  useEffect(() => {7    console.log("Subscribed:", subscribed);8  }, [subscribed]);9 10  let note = "";11  if (!subscribed) {12    const [email] = useState("asha@example.com");13    note = `We'll write to ${email}.`;14  }15 16  return (17    <div>18      <button onClick={() => setSubscribed(true)}>Subscribe</button>19      <p>{note}</p>20    </div>21  );22}

1import { useEffect, useState } from "react";2 3export default function App() {4  const [subscribed, setSubscribed] = useState(false);5 6  useEffect(() => {7    console.log("Subscribed:", subscribed);8  }, [subscribed]);9 10  let note = "";11  if (!subscribed) {12    const [email] = useState("asha@example.com");13    note = `We'll write to ${email}.`;14  }15 16  return (17    <div>18      <button onClick={() => setSubscribed(true)}>Subscribe</button>19      <p>{note}</p>20    </div>21  );22}

1import { useState } from "react";2 3function Welcome({ user }) {4  const [theme] = useState("light");5  if (user === null) {6    return <p>Please sign in.</p>;7  }8  const [visits] = useState(1);9  return (10    <p className={theme}>11      Welcome back, {user}. Visit number {visits}.12    </p>13  );14}15 16export default function App() {17  const [user, setUser] = useState(null);18 19  return (20    <div>21      <button onClick={() => setUser("Asha")}>Sign in</button>22      <Welcome user={user} />23    </div>24  );25}

1import { useState } from "react";2 3function Welcome({ user }) {4  const [theme] = useState("light");5  const [visits] = useState(1);6  if (user === null) {7    return <p>Please sign in.</p>;8  }9  return (10    <p className={theme}>11      Welcome back, {user}. Visit number {visits}.12    </p>13  );14}15 16export default function App() {17  const [user, setUser] = useState(null);18 19  return (20    <div>21      <button onClick={() => setUser("Asha")}>Sign in</button>22      <Welcome user={user} />23    </div>24  );25}

1import { useEffect, useState } from "react";2 3export default function App() {4  const [query, setQuery] = useState("");5 6  if (query !== "") {7    useEffect(() => {8      console.log("Searching for", query);9    }, [query]);10  }11 12  return <input placeholder="Search the menu" value={query} onChange={(e) => setQuery(e.target.value)} />;13}

1import { useEffect, useState } from "react";2 3export default function App() {4  const [query, setQuery] = useState("");5 6  useEffect(() => {7    if (query === "") return;8    console.log("Searching for", query);9  }, [query]);10 11  return <input placeholder="Search the menu" value={query} onChange={(e) => setQuery(e.target.value)} />;12}

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState(["Green tea", "Carrot cake"]);5 6  return (7    <div>8      <ul>9        {items.map((name) => {10          const [quantity, setQuantity] = useState(1);11          return (12            <li key={name}>13              {name} × {quantity} <button onClick={() => setQuantity(quantity + 1)}>Add one {name}</button>14            </li>15          );16        })}17      </ul>18      <button onClick={() => setItems([...items, "Lemonade"])}>Add lemonade</button>19    </div>20  );21}

1import { useState } from "react";2 3function CartLine({ name }) {4  const [quantity, setQuantity] = useState(1);5  return (6    <li>7      {name} × {quantity} <button onClick={() => setQuantity(quantity + 1)}>Add one {name}</button>8    </li>9  );10}11 12export default function App() {13  const [items, setItems] = useState(["Green tea", "Carrot cake"]);14 15  return (16    <div>17      <ul>18        {items.map((name) => <CartLine key={name} name={name} />)}19      </ul>20      <button onClick={() => setItems([...items, "Lemonade"])}>Add lemonade</button>21    </div>22  );23}

1import { useState } from "react";2 3export default function App() {4  const [gift, setGift] = useState(false);5  let messageBox = null;6  if (gift) {7    const [message, setMessage] = useState("");8    messageBox = (9      <div>10        <input placeholder="Gift message" value={message} onChange={(e) => setMessage(e.target.value)} />11        <p>Card says: {message}</p>12      </div>13    );14  }15 16  return (17    <div>18      <label>19        <input type="checkbox" checked={gift} onChange={(e) => setGift(e.target.checked)} /> This is a gift20      </label>21      {messageBox}22    </div>23  );24}

1import { useState } from "react";2 3function GiftMessage() {4  const [message, setMessage] = useState("");5  return (6    <div>7      <input placeholder="Gift message" value={message} onChange={(e) => setMessage(e.target.value)} />8      <p>Card says: {message}</p>9    </div>10  );11}12 13export default function App() {14  const [gift, setGift] = useState(false);15 16  return (17    <div>18      <label>19        <input type="checkbox" checked={gift} onChange={(e) => setGift(e.target.checked)} /> This is a gift20      </label>21      {gift && <GiftMessage />}22    </div>23  );24}

Check your understanding

Key takeaways

• Call hooks at the top level of a component or custom hook, before any early return.
• Never call them inside conditions, loops, event handlers, functions passed to other hooks, or try blocks.
• Call hooks only from components and custom hooks: functions named with a capital letter, or use and a capital letter.
• React finds each hook's saved value by its place in the list. A changed order throws, warns, or quietly hands a hook the wrong value.
• Put the condition inside the hook, or give the conditional part a component of its own.
• use is the exception: it can be called in a condition. eslint-plugin-react-hooks checks the rest as you type.

Coming next: Reusing logic with custom hooks. You'll write hooks of your own, and they follow these same rules.