深入理解useEffect依赖项与自更新状态的处理策略

import React, { useState, useEffect, useCallback, useRef } from 'react';

// 模拟API调用
const callAPI = async () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id: Math.random(), value: 'new item' });
    }, 500);
  });
};

function MyComponent() {
  const [list, setList] = useState([]);
  const [curPage, setCurPage] = useState(0);

  const fetchItem = useCallback(async () => {
    const data = await callAPI(); // data is an object
    setList(prev => [...prev, data]);
  }, []); // fetchItem 是稳定的，因为它没有外部依赖

  useEffect(() => {
    // ESLint 警告: React Hook useEffect has a missing dependency: 'list.length'.
    // Either include it or remove the dependency array. (react-hooks/exhaustive-deps)
    if (list.length - 1 < curPage) {
      console.log(`Fetching item for page ${curPage}. Current list length: ${list.length}`);
      fetchItem().then(() => {
        // some operations after fetch
        console.log('Fetch completed and list updated.');
      });
    } else {
      // some operations when list is sufficient
      console.log(`List is sufficient for page ${curPage}. Current list length: ${list.length}`);
    }
  }, [curPage, fetchItem]); // 如果在这里添加 'list' 或 'list.length'，将导致无限循环

  // 示例UI，用于触发 curPage 变化
  return (
    <div>
      <h1>Current Page: {curPage}</h1>
      <button onClick={() => setCurPage(prev => prev + 1)}>Next Page</button>
      <button onClick={() => setCurPage(0)}>Reset Page</button>
      <h2>List Items:</h2>
      <ul>
        {list.map((item, index) => (
          <li key={item.id || index}>{item.value} (Index: {index})</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

import React, { useState, useEffect, useCallback, useRef } from 'react';

// 模拟API调用
const callAPI = async () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id: Math.random(), value: 'new item' });
    }, 500);
  });
};

function MyComponentRefSolution() {
  const [list, setList] = useState([]);
  const [curPage, setCurPage] = useState(0);

  // 1. 创建一个 useRef 来存储 list 的最新长度
  const listLengthRef = useRef(list.length);

  // 2. 使用一个独立的 useEffect 来确保 listLengthRef.current 始终与 list.length 同步
  useEffect(() => {
    listLengthRef.current = list.length;
    console.log(`Ref updated: listLengthRef.current = ${listLengthRef.current}`);
  }, [list]); // 这个 useEffect 仅在 list 变化时更新 ref，不触发主要的副作用逻辑

  const fetchItem = useCallback(async () => {
    const data = await callAPI(); // data is an object
    setList(prev => [...prev, data]);
  }, []); // fetchItem 是稳定的，因为它没有外部依赖

  useEffect(() => {
    // 3. 在主要的 useEffect 中，从 listLengthRef.current 读取最新的 list 长度
    // 此时，listLengthRef.current 并不是 useEffect 的依赖项，因此它的变化不会触发此 effect 重新运行
    if (listLengthRef.current - 1 < curPage) {
      console.log(`Fetching item for page ${curPage}. Current list length (from ref): ${listLengthRef.current}`);
      fetchItem().then(() => {
        // some operations after fetch
        console.log('Fetch completed and list updated.');
      });
    } else {
      // some operations when list is sufficient
      console.log(`List is sufficient for page ${curPage}. Current list length (from ref): ${listLengthRef.current}`);
    }
  }, [curPage, fetchItem]); // 依赖项只包含 curPage 和 fetchItem，避免了循环

  // 示例UI，用于触发 curPage 变化
  return (
    <div>
      <h1>Current Page: {curPage}</h1>
      <button onClick={() => setCurPage(prev => prev + 1)}>Next Page</button>
      <button onClick={() => setCurPage(0)}>Reset Page</button>
      <h2>List Items:</h2>
      <ul>
        {list.map((item, index) => (
          <li key={item.id || index}>{item.value} (Index: {index})</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponentRefSolution;