React hooks:每次从套接字进行状态更新时,滚动位置都会转到顶部

我正在使用一个插座连接显示来自传感器的实时反馈。

我列出了10个传感器,所以页面有滚动。

当我得到实时数据时,我将它与我的传感器数据结合起来,并更新用户界面。

 // combining devices and radar data to show on UI.
  useEffect(() => {
    if (!_.isEmpty(devices)) {
      devices.forEach((item) => {
        if (data && data.serialNumber === item.serialNumber) {
          item.br = data.br;
          item.hr = data.hr;
          item.presence = data.presence;
        }
      });
    }
  }, [data]);
// [data] dependency variable changes every second and I think that;s causing the re-render each second. 

数据每秒都会出现,所以它每秒都会重新渲染。

我的问题是,当我开始滚动到底部时,新的数据出现,状态更新。页面再次转到顶部。

我不确定是否可以在不引起重新渲染的情况下更新状态? 我不确定是否有其他钩子api可以帮助我解决这个问题。

我的带有设备列表的scrollview呈现如下:

 <ScrollView contentContainerStyle={{flexGrow: 1}}>
            {devices.map((item, key) => {
              const roomDetails = getRoomBackground(item);
              return (
                <TouchableOpacity .... 
</ScrollView>

感谢您的指导。