自定义 Hook：复用的正确姿势

import { useEffect, useState } from "react";

function FontSizeSetting() {
  // 初始化：惰性函数读一次 localStorage（第 4 篇的惰性初始化）
  const [size, setSize] = useState(() => {
    const saved = localStorage.getItem("font-size");
    return saved ? Number(saved) : 14;
  });

  useEffect(() => {
    localStorage.setItem("font-size", String(size));
  }, [size]);

  return (
    <input type="range" value={size}
      onChange={e => setSize(Number(e.target.value))} />
  );
}

import { useEffect, useState } from "react";

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

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

  return [value, setValue] as const; // as const：推断成元组，第 4 站细说
}

// 用起来和 useState 一个手感
const [size, setSize] = useLocalStorage("font-size", 14);

function FontSizePanel() {
  // 状态 #1：只属于 FontSizePanel
  const [size, setSize] = useLocalStorage("font-size", 14);
  return <input value={size} onChange={e => setSize(Number(e.target.value))} />;
}

function ThemePanel() {
  // 状态 #2：只属于 ThemePanel，和上面的 size 毫无关系
  const [theme, setTheme] = useLocalStorage("theme", "light");
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      {theme}
    </button>
  );
}

import { useEffect, useState } from "react";

function useDebounce<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id); // value 又变了：拆掉旧闹钟，重新计时
  }, [value, delay]);

  return debounced;
}

// 用法：输入随便抖，只有停稳的值会往下游走
const debouncedKeyword = useDebounce(keyword);

useEffect(() => {
  search(debouncedKeyword);
}, [debouncedKeyword]);

import { useEffect, useState } from "react";

function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const controller = new AbortController();
    setLoading(true);
    setError(null);

    fetch(url, { signal: controller.signal })
      .then(r => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        return r.json() as Promise<T>;
      })
      .then(setData)
      .catch((e: Error) => {
        if (e.name !== "AbortError") setError(e); // 主动取消不算错误
      });

    // cleanup：url 变了 / 组件卸载了，掐断旧请求（第 9 篇）
    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

// useDebouncedFetch = useDebounce ⊕ useFetch，Hook 组合 Hook，规则不变
function useDebouncedFetch<T>(url: string, delay = 300) {
  const debouncedUrl = useDebounce(url, delay);
  return useFetch<T>(debouncedUrl);
}

import { useCallback, useState } from "react";

function usePlayer() {
  const [playing, setPlaying] = useState(false);

  // ✅ useCallback 稳住：调用方把 toggle 写进依赖数组也不会误触发
  const toggle = useCallback(() => setPlaying(p => !p), []);

  return { playing, toggle };
}