如何避免React API轮询组件因修改依赖状态导致的无限重渲染？

需求与问题描述 #

需要实现一个定期获取用户列表的API轮询器：请求时需携带当前页码，返回结果包含新的页码，需存储供下次请求使用。

尝试的代码如下：

const [users, setUsers] = useState([]);
const [page, setPage] = useState(0);

useInterval(
  () => {
    const res = await Service.getUsers(page);
    setUsers(res.items);
    setPage(res.page);
  },
  5000 // 每5秒执行一次
)

return [users, page, setPage]; // 返回setPage允许用户手动修改页码

存在的问题：轮询器更新内部状态（page和users）会引发组件无限重渲染；即使改用Recoil/Zustand等全局状态库，修改状态仍会触发组件重渲染，导致轮询器再次执行，形成循环。

解决方案 #

核心思路是让轮询回调直接从全局状态获取最新值，不依赖组件渲染时的状态变量，同时稳定定时器触发逻辑，避免因组件重渲染重复创建定时器。以下以Zustand为例给出实现方案：

1. 定义全局状态Store #

import { create } from 'zustand';

// 创建用户状态Store，存储用户列表和当前页码
const useUserStore = create((set) => ({
  users: [],
  page: 0,
  // 更新用户列表的方法
  setUsers: (newUsers) => set({ users: newUsers }),
  // 更新页码的方法（支持手动修改）
  setPage: (newPage) => set({ page: newPage }),
}));

2. 实现轮询Hook #

import { useEffect, useRef } from 'react';
import { useUserStore } from './userStore';
import Service from './your-service-module';

export const useUserPoller = () => {
  const { users, page, setPage, setUsers } = useUserStore();
  const intervalRef = useRef(null);

  // 用useRef保存最新的轮询回调，避免组件重渲染时重新创建
  const pollCallback = useRef(async () => {
    try {
      // 直接从Store获取最新的页码，不依赖组件渲染时的page变量
      const currentPage = useUserStore.getState().page;
      const res = await Service.getUsers(currentPage);
      // 更新全局状态
      setUsers(res.items);
      setPage(res.page);
    } catch (error) {
      console.error('用户列表轮询失败:', error);
    }
  });

  // 组件挂载时启动定时器，仅执行一次
  useEffect(() => {
    intervalRef.current = setInterval(() => {
      pollCallback.current();
    }, 5000);

    // 组件卸载时清除定时器
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, []);

  // 暴露手动修改页码的方法
  const manualSetPage = (newPage) => {
    setPage(newPage);
  };

  return { users, currentPage: page, manualSetPage };
};

3. 在组件中使用 #

import { useUserPoller } from './useUserPoller';

function UserList() {
  const { users, currentPage, manualSetPage } = useUserPoller();

  return (
    <div>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
      <button onClick={() => manualSetPage(currentPage - 1)} disabled={currentPage === 0}>上一页</button>
      <span>当前页: {currentPage}</span>
      <button onClick={() => manualSetPage(currentPage + 1)}>下一页</button>
    </div>
  );
}

方案说明 #

• 全局状态管理：用Zustand存储users和page，确保状态在应用内可共享，手动修改页码时轮询器能自动获取最新值。
• 稳定的轮询回调：通过useRef保存轮询回调，避免组件重渲染时重复创建；回调内部直接从Store取最新页码，不依赖组件渲染时的状态变量，切断重渲染循环。
• 定时器只初始化一次：useEffect的依赖项为空数组，确保定时器仅在组件挂载时启动一次，不会因状态更新重新触发。

如果使用Recoil，可采用类似思路：用useRecoilCallback获取最新状态，避免将状态作为依赖项引发重渲染循环。

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