深层级对象如何进行状态管理？

我的整个页面根据一个层级比较深的对象(结构如下)渲染而成的，且在渲染"G"的时候可能还会用到"H"中的数据，整个状态管理被我搞崩了，现在的方法是类似于全局变量一样，整个数据对象处于根组件 App 中，哪个组件需要用到哪些东西，就从根对象中解构出所需的变量和所需的 setState，等到有多个组件用到了相似的数据再考虑合并。

现在的问题是，状态管理几近于无，需要数据 /setState 的时候就设一个 React hooks，根组件页面也比较庞大(五六百行，虽然都是功能彼此隔离的小的 useEffect 堆叠而成，但页面终归还是很丑)，我能怎么办呢？

{
  "a": [
    {
      "c": [
        {
          "e": [
            {
              "G": [
                100, 200
              ]
            }
          ]
        }
      ]
    }
  ],
  "b": [
    {
      "d": [
        {
          "f": [
            {
              "H": [
                111, 222
              ]
            }
          ]
        }
      ]
    }
  ]
}