Вкатываюсь из бекенда во фронт. По сути мне на работе сказали что вот тебе время, сиди решай задачу, но главное чтоб она была на React. Я будучи дедом прочитал мануал, полистал репозиторий, собрал мелкие проекты и теперь нужно решить эту реальную задачу:

Бекенд через вебсокет высерает какие-то данные. При подключении это json со списком топиков ['topic-1', 'topic-2', 'topic-3], а потом при каждом обновлении этого топика выпёрдывает какое-то числовое значение типа: {topic: 'topic-1', value: 3}

В реакте я сделал хук который подрубается в сокету, читает первое сообщение и на основе него забивает стейт. условно setTopics(data) где data это массив который пришёл при подключении

В JSX это topics.map(topic => <Topic key={topic} name={topic}/>). понятное дело я всё упрощаю чтоб не делать простыней

Моя проблема возникает тогда когда один из этих топиков обновляется каждую секунду, а остальные топики нет и их может быть довольно много. Я не пойму как мне обновлять состояние каждого топика так чтоб не обновлялся стейт родительского компонента и не перерисовывал остальные топики или тут хватает memo на компоненте топика?

И второй вопрос такой: в топике отображается график изменений его значений и тут не очень уместно делать ререндер так как я использую библиотеку для построения графиков. При ререндере она дёргается и не отображает анимации добавления новой точки. То есть мне нужно добавлять числа в массив этого топика и при этом не перерендеривать его часть, но обрабатывать некое событие добавления