反应useCallback钩在重新渲染时出现意外行为

Question

也许我只是不了解钩子应该如何工作，但是我尝试了许多不同的配置来将该组件转换为钩子，但它们都失败了。

export const VideoContainer = ({ localStream, remoteStream, status }: Props) => {
  const classes = useStyles();

  const setLocalStreamEl = useCallback(node => {
    console.log('useCallback');
    if (localStream && node && !node.srcObject) {
      console.log('setting srcObject');
      node.srcObject = localStream;
    }
  }, []);

  return (
    <InjectIntl>
      {intl =>
        localStream && remoteStream && status === intl.messages.inProgress ? (
          <div className={classes.videoDiv}>
            render something else
          </div>
        ) : (
          <div className={classes.videoDiv}>
            <video ref={setLocalStreamEl} className={classes.mainStream} autoPlay controls />
          </div>
        )
      }
    </InjectIntl>
  );
};

我将视频元素与视频流一起渲染，但是状态道具每秒更新一次，并在重新渲染时调用所有useCallback逻辑，这会导致视频烦人地闪烁。

我尝试添加一个useRef回调函数以及以下和useEffect的不同组合，并且我已经阅读了100遍文档，但无法将所有内容组合在一起一种有效且不会在每个渲染器上重设ref的方法。

有什么想法吗？