React的useEffect依赖数组的坑

useEffect(() => {
  // 副作用逻辑
  return () => {
    // 清理逻辑
  };
}, [dependencies]); // 依赖数组

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count); // 总是打印初始值
      setCount(count + 1);
    }, 1000);
    
    return () => clearInterval(timer);
  }, []); // 空依赖数组
  
  return <div>{count}</div>;
}

useEffect(() => {
  const timer = setInterval(() => {
    setCount(c => c + 1); // 使用函数式更新
  }, 1000);
  
  return () => clearInterval(timer);
}, []); // 仍然可以保持空数组，因为使用了函数式更新

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [user, userId]); // user被包含在依赖中
  
  // ...
}

useEffect(() => {
  fetchUser(userId).then(setUser);
}, [userId]); // 只依赖真正会变化的userId

function ProductList() {
  const [products, setProducts] = useState([]);
  
  const fetchProducts = () => {
    fetch('/api/products').then(res => res.json()).then(setProducts);
  };
  
  useEffect(() => {
    fetchProducts();
  }, [fetchProducts]); // 函数被包含在依赖中
  
  // ...
}

// 方案一：使用useCallback
const fetchProducts = useCallback(() => {
  fetch('/api/products').then(res => res.json()).then(setProducts);
}, []);

// 方案二：直接定义在effect内部
useEffect(() => {
  const fetchProducts = () => {
    fetch('/api/products').then(res => res.json()).then(setProducts);
  };
  fetchProducts();
}, []);

useEffect(() => {
  const handleScroll = () => {
    // 处理滚动
  };
  
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, [scrollPosition]); // scrollPosition变化太频繁

const scrollPositionRef = useRef();
scrollPositionRef.current = scrollPosition;

useEffect(() => {
  const handleScroll = () => {
    const pos = scrollPositionRef.current;
    // 使用pos
  };
  
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []); // 不再依赖scrollPosition

const filters = { category: 'books', sort: 'newest' };

useEffect(() => {
  fetchProducts(filters);
}, [filters]); // 每次渲染filters都是新对象

const filters = useMemo(() => ({
  category: 'books',
  sort: 'newest'
}), []); // 依赖根据实际情况添加

useEffect(() => {
  fetchProducts(filters);
}, [filters]);

{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/exhaustive-deps": "warn"
  }
}

const isFirstRender = useRef(true);

useEffect(() => {
  if (isFirstRender.current) {
    isFirstRender.current = false;
    return;
  }
  
  // 非初次渲染的逻辑
}, [deps]);

useEffect(() => {
  setCount(count + 1); // count变化导致effect重新执行
}, [count]);