react-hooks

name	react-hooks
description	React Hooks技能。当用户需要编写自定义Hooks、理解Hooks用法、封装Hooks逻辑、或询问React状态管理时使用此skill。

React Hooks Skill

React Hooks 编写指导，帮助 AI 完成自定义 Hooks 设计、状态管理、副作用处理等任务。

核心能力

能力	说明
🎣 自定义 Hooks	封装可复用逻辑
📊 状态管理	useState/useReducer
⚡ 副作用处理	useEffect/useLayoutEffect
🔧 性能优化	useMemo/useCallback
🔗 上下文	useContext

---

常用自定义 Hooks

useToggle

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  
  const toggle = useCallback(() => setValue(v => !v), []);
  const setTrue = useCallback(() => setValue(true), []);
  const setFalse = useCallback(() => setValue(false), []);
  
  return { value, toggle, setTrue, setFalse };
}

// 使用
const { value: visible, toggle, setFalse: hide } = useToggle();

useLocalStorage

function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setValue = useCallback((value: T | ((val: T) => T)) => {
    setStoredValue(prev => {
      const valueToStore = value instanceof Function ? value(prev) : value;
      localStorage.setItem(key, JSON.stringify(valueToStore));
      return valueToStore;
    });
  }, [key]);

  return [storedValue, setValue] as const;
}

useDebounce

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

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

// 使用
const debouncedSearch = useDebounce(searchTerm, 500);

useFetch

interface UseFetchResult<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
  refetch: () => void;
}

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

  const fetchData = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(url);
      const json = await res.json();
      setData(json);
    } catch (err) {
      setError(err as Error);
    } finally {
      setLoading(false);
    }
  }, [url]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return { data, loading, error, refetch: fetchData };
}

---

Hooks 规则

必须遵守

// ✅ 顶层调用
function Component() {
  const [count, setCount] = useState(0);
  useEffect(() => {}, []);
}

// ❌ 条件调用
function BadComponent({ condition }) {
  if (condition) {
    const [state, setState] = useState(0); // 错误！
  }
}

// ❌ 循环中调用
function BadComponent({ items }) {
  items.forEach(() => {
    const [state, setState] = useState(0); // 错误！
  });
}

依赖数组

// ✅ 完整依赖
useEffect(() => {
  fetchUser(userId);
}, [userId]);

// ❌ 缺少依赖
useEffect(() => {
  fetchUser(userId); // userId 缺失
}, []);

// ✅ 稳定回调
const handleClick = useCallback(() => {
  doSomething(count);
}, [count]);

---

触发关键词

类型	关键词示例
自定义Hooks	"自定义hooks"、"封装hooks"、"useXxx"
状态管理	"useState"、"useReducer"、"状态"
副作用	"useEffect"、"副作用"、"请求数据"

---

最佳实践

✅ 推荐：
- 以 use 开头命名
- 返回稳定的函数引用
- 处理清理逻辑
- 完整的依赖数组

❌ 避免：
- 条件/循环中调用
- 忽略依赖警告
- 不清理副作用