如何处理useEffect依赖状态在自身执行期间更新的问题

方案1：用useRef同步状态，避免不必要的effect重跑 #

这是React生态中处理「需要最新状态但不想触发effect重复执行」的常规手段，并非不常规。核心思路是用ref存储最新的list.length，在list更新时同步ref的值，这样effect只依赖需要触发逻辑的curPage和fetchItem，同时能拿到最新的列表长度：

const [list, setList] = useState([]);
const [curPage, setCurPage] = useState(0);
// 用ref存储最新的list长度
const listLengthRef = useRef(0);

// 同步list长度到ref，这个effect只会在list变化时执行
useEffect(() => {
  listLengthRef.current = list.length;
}, [list]);

const fetchItem = useCallback(async () => {
  const data = await callAPI();
  setList(prev => [...prev, data]);
}, []);

useEffect(() => {
  // 使用ref.current获取最新长度，无需将list或list.length加入依赖
  if (listLengthRef.current - 1 < curPage) {
    fetchItem().then(() => {
      // 后续操作
    });
  } else {
    // 其他操作
  }
}, [curPage, fetchItem]);

方案2：将判断逻辑直接绑定到状态触发源 #

如果curPage的变更来自用户主动操作（比如分页按钮点击），可以直接在操作事件中做判断，完全跳过useEffect的依赖问题，逻辑更直观：

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

const fetchItem = useCallback(async () => {
  const data = await callAPI();
  setList(prev => [...prev, data]);
}, []);

// 分页切换事件，直接在这里判断是否需要加载数据
const handlePageChange = useCallback((newPage) => {
  setCurPage(newPage);
  if (list.length - 1 < newPage) {
    fetchItem().then(() => {
      // 后续操作
    });
  } else {
    // 其他操作
  }
}, [list.length, fetchItem]);

方案3：用useReducer封装复杂状态逻辑 #

如果你的状态交互逻辑更复杂（比如涉及多个状态联动），可以用useReducer统一管理状态，将判断和更新逻辑收敛到reducer中，减少effect的依赖复杂度：

const initialState = {
  list: [],
  curPage: 0
};

function reducer(state, action) {
  switch (action.type) {
    case 'CHANGE_PAGE':
      return { ...state, curPage: action.payload };
    case 'ADD_ITEM':
      return { ...state, list: [...state.list, action.payload] };
    default:
      return state;
  }
}

function YourComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const { list, curPage } = state;

  const fetchItem = useCallback(async () => {
    const data = await callAPI();
    dispatch({ type: 'ADD_ITEM', payload: data });
  }, []);

  useEffect(() => {
    if (list.length - 1 < curPage) {
      fetchItem().then(() => {
        // 后续操作
      });
    } else {
      // 其他操作
    }
  }, [curPage, list.length, fetchItem]);

  // 分页切换时调用dispatch
  const handlePageChange = (newPage) => {
    dispatch({ type: 'CHANGE_PAGE', payload: newPage });
  };

  // 渲染逻辑...
}

内容的提问来源于stack exchange，提问作者Arc