React中useEffect每秒触发千次事件处理器引发更新深度超限问题咨询

React本身没有限制每秒函数调用次数，你碰到的警告本质是高频setState触发连续同步更新导致React调用栈溢出，不是单纯的调用次数限制。

问题根源 #

你的代码逻辑本身没问题，但Electron的IPC事件属于原生事件范畴，React默认不会对这类事件里的setState做批量更新处理。当每秒触发1000+次消息时，每一次setValues(data)都会同步触发组件重渲染——前一次渲染还未完成，下一次setState又发起新的更新，这种连续的同步更新会让React调用栈深度超过阈值，从而抛出"Maximum update depth exceeded"警告。

另外要确认：window.sensor.offRawData()是否正确移除了对应的监听回调？如果清理函数没精准解绑，可能导致重复监听，进一步加剧更新频率。

解决办法 #

1. 给IPC回调加节流/防抖

合并高频数据更新，只保留最新数据并定时触发setState，大幅减少更新次数：

import { useState, useEffect, useCallback } from 'react';
// 可使用lodash的throttle，也可自行实现简易版节流函数
const throttle = (fn, delay) => {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall >= delay) {
      fn(...args);
      lastCall = now;
    }
  };
};

const MainScreen = () => {
  const [values, setValues] = useState<number[]>([]);

  const handleRawData = useCallback(throttle((data) => {
    setValues(data);
  }, 50), []); // 每50ms更新一次，可根据业务需求调整间隔

  useEffect(() => {
    window.sensor.onRawData(handleRawData);
    return () => {
      window.sensor.offRawData(handleRawData);
    };
  }, [handleRawData]);

  // ...其他组件逻辑
};

2. 手动开启React批量更新

用React的unstable_batchedUpdates包裹setState，让React批量处理高频更新，减少重渲染次数：

import { useState, useEffect } from 'react';
import { unstable_batchedUpdates } from 'react-dom';

const MainScreen = () => {
  const [values, setValues] = useState<number[]>([]);

  useEffect(() => {
    const handleRawData = (data) => {
      unstable_batchedUpdates(() => {
        setValues(data);
      });
    };
    window.sensor.onRawData(handleRawData);
    return () => {
      window.sensor.offRawData(handleRawData);
    };
  }, []);

  // ...其他组件逻辑
};

注：unstable_前缀表示该API可能在未来版本变更，但目前在实际项目中被广泛使用，能有效解决原生事件中的批量更新问题。

3. 确保监听清理正确

确认offRawData能精准移除对应的回调函数——如果你的事件订阅是基于引用匹配的，必须传入同一个回调引用才能正确解绑（这也是上面用useCallback包裹回调的原因之一），避免组件卸载后监听残留或重复绑定导致的多次触发。

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