Правила хуков и почему они такие

// маленький React: ячейки состояния лежат в массиве, а выбирает их номер вызова
const cells: unknown[] = [];
let cursor = 0;

function useCell<T>(initial: T): T {
  const i = cursor;
  cursor += 1;
  // ячейка заводится один раз: со второго рендера initial уже никому не нужен
  if (!(i in cells)) cells[i] = initial;
  return cells[i] as T;
}

function render(component: () => void): void {
  cursor = 0; // каждый рендер обходит ячейки с начала — на этом всё и держится
  component();
}

function Form(): void {
  const name = useCell("Рико");
  const age = useCell(37);
  console.log(name, age);
}

render(Form);
cells[1] = 38; // как будто сработал setAge(38)
render(Form);

const cells: unknown[] = [];
let cursor = 0;
let withName = true;

function useCell<T>(initial: T): T {
  const i = cursor;
  cursor += 1;
  if (!(i in cells)) cells[i] = initial;
  return cells[i] as T;
}

function render(component: () => void): void {
  cursor = 0;
  component();
}

function Form(): void {
  // хук спрятан в условие: во втором рендере этого вызова не будет
  const name = withName ? useCell("Рико") : "гость";
  const age = useCell(37);
  console.log(name, age);
}

render(Form);
withName = false;
render(Form); // ?

interface GreetingProps {
  formal: boolean;
}

function Greeting({ formal }: GreetingProps) {
  // хук в условии: вызов всегда ровно один, но какой именно — решает пропс
  const [text] = formal ? React.useState("Здравствуйте") : React.useState("Привет");
  console.log("рендер Greeting: formal =", formal, "| текст:", text);
  return <p>{text}</p>;
}

function App() {
  const [formal, setFormal] = React.useState(true);
  return (
    <div>
      <Greeting formal={formal} />
      <button id="toggle" onClick={() => setFormal((f) => !f)}>
        перейти на «ты»
      </button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
// нажимаем за читателя: ветка условия меняется на вторую
setTimeout(() => document.getElementById("toggle")!.click(), 50);

interface NoteProps {
  withHint: boolean;
}

function Note({ withHint }: NoteProps) {
  const [text] = React.useState("важное");
  if (withHint) {
    // второй хук появляется и исчезает вместе с пропсом
    const [hint] = React.useState("подсказка");
    console.log("рендер Note: два хука,", hint);
  } else {
    console.log("рендер Note: один хук");
  }
  return <p>{text}</p>;
}

function App() {
  const [withHint, setWithHint] = React.useState(true);
  return (
    <div>
      <Note withHint={withHint} />
      <button id="toggle" onClick={() => setWithHint((v) => !v)}>
        убрать подсказку
      </button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("toggle")!.click(), 50);

interface Product {
  id: number;
  name: string;
}

interface CardProps {
  product: Product | null;
}

function Card({ product }: CardProps) {
  // ранний возврат выше хука: при product === null не вызовется ни один
  if (product === null) return <p>ничего не выбрано</p>;
  const [count, setCount] = React.useState(1);
  console.log("рендер Card:", product.name, "| штук:", count);
  return (
    <p>
      {product.name}: {count} шт.{" "}
      <button id="more" onClick={() => setCount((c) => c + 1)}>
        ещё
      </button>
    </p>
  );
}

const kettle: Product = { id: 1, name: "Чайник" };

function App() {
  const [product, setProduct] = React.useState<Product | null>(kettle);
  return (
    <div>
      <Card product={product} />
      <button id="toggle" onClick={() => setProduct((prev) => (prev === null ? kettle : null))}>
        снять и вернуть выбор
      </button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
// добавляем штуку, снимаем выбор и возвращаем тот же самый товар
setTimeout(() => document.getElementById("more")!.click(), 50);
setTimeout(() => document.getElementById("toggle")!.click(), 100);
setTimeout(() => document.getElementById("toggle")!.click(), 150);

interface Product {
  id: number;
  name: string;
}

interface CardProps {
  product: Product | null;
}

function Card({ product }: CardProps) {
  // хук поднят над возвратом: он вызывается в любом рендере
  const [count, setCount] = React.useState(1);
  console.log("рендер Card:", product === null ? "никого" : product.name, "| штук:", count);
  if (product === null) return <p>ничего не выбрано</p>;
  return (
    <p>
      {product.name}: {count} шт.{" "}
      <button id="more" onClick={() => setCount((c) => c + 1)}>
        ещё
      </button>
    </p>
  );
}

const kettle: Product = { id: 1, name: "Чайник" };

function App() {
  const [product, setProduct] = React.useState<Product | null>(kettle);
  return (
    <div>
      <Card product={product} />
      <button id="toggle" onClick={() => setProduct((prev) => (prev === null ? kettle : null))}>
        снять и вернуть выбор
      </button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("more")!.click(), 50);
setTimeout(() => document.getElementById("toggle")!.click(), 100);
setTimeout(() => document.getElementById("toggle")!.click(), 150);

function Counter() {
  const [count, setCount] = React.useState(0);
  console.log("рендер Counter:", count);
  const onClick = () => {
    const [bonus] = React.useState(10);
    setCount(count + bonus);
  };
  return (
    <button id="inc" onClick={onClick}>
      Нажато: {count}
    </button>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Counter />);
setTimeout(() => document.getElementById("inc")!.click(), 50);

interface WatcherProps {
  enabled: boolean;
}

function Watcher({ enabled }: WatcherProps) {
  // сам вызов безусловный, условие переехало внутрь эффекта
  React.useEffect(() => {
    if (!enabled) return;
    console.log("подписка включена");
    return () => console.log("подписка снята");
  }, [enabled]);
  return <p>{enabled ? "следим" : "не следим"}</p>;
}

function App() {
  const [enabled, setEnabled] = React.useState(false);
  return (
    <div>
      <Watcher enabled={enabled} />
      <button id="toggle" onClick={() => setEnabled((v) => !v)}>
        {enabled ? "выключить" : "включить"}
      </button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("toggle")!.click(), 50);
setTimeout(() => document.getElementById("toggle")!.click(), 100);

interface Item {
  id: number;
  title: string;
}

interface RowProps {
  item: Item;
}

// хук снова на верхнем уровне — просто уровень теперь у строки
function Row({ item }: RowProps) {
  const [done, setDone] = React.useState(false);
  console.log("рендер строки:", item.title, "| сделано:", done);
  return (
    <li id={"row" + item.id} onClick={() => setDone((d) => !d)}>
      {item.title} {done ? "✓" : ""}
    </li>
  );
}

const items: Item[] = [
  { id: 1, title: "купить хлеб" },
  { id: 2, title: "полить цветы" },
];

function List() {
  return (
    <ul>
      {items.map((item) => (
        <Row key={item.id} item={item} />
      ))}
    </ul>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<List />);
setTimeout(() => document.getElementById("row2")!.click(), 50);