Рекомендуемая архитектура данных с наилучшими характеристиками для масштабируемости для FlatList с дочерним компонентом FlatList

Question

Какой была бы идеальная структура данных, если бы я хотел отобразить FlatList, но внутри FlatList есть еще один дочерний компонент FlatList.

Например, в фиде Instagram есть FlatList (вертикальный), а затем в каждом посте может быть карусель с горизонтальной горизонталью FlatList.

Я пытаюсь решить, иметь ли 1 огромную структуру данных, и просто пропустить данные, или лучше разделить данные ? И есть какие-то проверки, чтобы найти соответствующий пост

Допустим, вот данные:

const DATA = [
  {
    id: 1,
    title: 'give it some workout title',
    media: [
      {
        source:
          'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
      },
      {
        source:
          'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
      },
    ],
  },
  {
    id: 2,
    title: 'second workout title',
    media: [
      {
        source:
          'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
      },
    ],
  },
  {
    id: 3,
    title: 'woah this is a good title',
    media: [
      {
        source:
          'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
      },
    ],
  },
];

Вот домашний канал:

const Home = () => {
  return (
    <>
      <View>
        <FlatList
          data={DATA}
          renderItem={({item}) => <Card {...item} />}
          keyExtractor={(item) => item.id.toString() }
        />
      </View>
    </>
  );
}

Тогда компонент карты:

const Card = (props) => {
  return (
    <>
      <VideoRender {...props} key={props.index}/>
    </>
  );
}

Тогда вот компонент рендеринга для видео:

const VideoRender = (props) => {
  return (
    <View style={styles.container}>
      <FlatList
        horizontal
        data={props.media}
        renderItem={({item}) => <VideoDisplay source={item.source} />}
        keyExtractor={(item, index) => item.title + index + item.source}
      />
    </View>
  );
}

Затем фактический компонент видео:

const VideoDisplay = ({source}) => {
  return (
    <>
      <Video
        source={{uri: source}}
      />
    </>
  );
}

Это кажется самым прямым методом, бурение с опорой, но я предполагаю, что в этом могут быть недостатки? Я все еще хочу изучать MOBX или REDEX, и, надеюсь, я смогу включить это в конце концов, но будет ли это необходимо?