React: избавиться от многократной перерисовки дочерних компонент

Есть такая структура

компонент <MyPage />,

который содержит компонент <MyTable />,

которая содержит Ant Design компонент <Table />

которому передаются данные по строкам, где каждая строка содержит компонент <MyEditor />

MyPage передаёт в MyTable массив строк текста lines

MyTable формирует массив данных для отображения в Table, которые содержат компоненты MyEditor которым передаются по одной строке из списка

  // подготовить данные для отображения в таблице
  const dataSource = props.lines.map((line, index) => ({
      key     : index,
      id      : index + 1,
      text    : <MyEditor
                  id            = {index} 
                  text          = {line}
                  onChange      = {handleChange} 
                />,
  }));

  // отрисовать компонент
  return (
    <Table
      pagination      = {false}
      columns         = {columns}
      dataSource      = {dataSource}
    />
  );

Внутри MyEditor строка разбивается на слова и из слов уже формируется набор элементов.

Пользователь никак данные не может изменять, может только мышкой выбрать один из сформированных элементов о чём информируется самый верхний компонент - MyPage, этот компонент спускает вниз эту информацию, чтобы компоненты MyEditor увидели скорректировали отрисовку (если требуется, но требуется редко).

Возникает проблема:

при каждом (!!!) таком выделении отрисовывается таблица, а значит и все компоненты MyEditor (несколько сотен), что заметно при работе (лаги)

Подскажите как правильно избежать этого?

P.S.

когда добавил в компонент MyEditor возможность вводить текст (поле Input), текст передаётся компоненту MyPage, но обратно не отдается, а просто сохраняется в состоянии, то тоже происходит отрисовка всех компонент MyEditor, что совершенно избыточно

Подскажите как скорректировать подход? Через Redux/Mobx писать сразу из MyEditor в общее хранилище и отслеживать его содержимое или как-то покрасивее можно?