整个组件的不必要的重新渲染

Question

我的 React 应用程序定义如下：

function App() {

  const [clickedNode, setClickedNode] = useState({});
  const [hoveredLink, setHoveredLink] = useState({});

  const updateNode = useCallback((node) => { setClickedNode(node); });

  return (
    <Container fluid>
      <Row>
    <Col sm={8} >
      <MemoGraph setClickedNode={updateNode} />
    </Col>
    <Col sm={4}>
      <InfoSection node={clickedNode}
        link={hoveredLink} />
    </Col>
      </Row>
    </Container >
  );
}

在 MemoGraph 中，图形可视化中有一个回调，用于更新 ClickedNode 状态变量。

这实际上只是为了重新渲染 InfoSection 对象，但它会导致整个组件重新渲染。

MemoGraph 重新渲染非常昂贵，需要停止。在 DevTools 中，据说 App 会因为 Hooks 的变化而重新渲染，我不明白。有没有人可以解释在子组件中更改父状态的最佳方法，但只有 InfoSection 呈现？

任何帮助将不胜感激！