React：仅渲染必要的组件

有一个 React 组件WordsEditor，其中包含数百个组件WordBlock。

当状态改变时，WordsEditor它会被重新绘制，相应地，它的所有组件也会被重新绘制WordBlock，尽管事实上只有少数组件发生了变化WordBlock。

告诉我如何确保只重绘必要的组件。

文字编辑器：

// компонент: 'Редактор слов'
const WordsEditor: React.FC<IPropsWordsEditor> = (props) => {
  // контроль состояний
  const [selectedIndices, setSelectedIndices]       = useState<number[]>([]);               // список индексов выделенных слов
  const [selectedAuxIndices, setSelectedAuxIndices] = useState<number[]>([]);               // список вспомогательных индексов выделенных слов
  const [categoriesGroups, setCategoriesGroups]     = useState<IDataCategoryGroup[]>([]);   // список сформированных групп слов

  // ОСНОВНАЯ ЛОГИКА
  // ...    
 
  // отрисовать компонент
  const toolbarIndex: number = toolbar_enabled && selectedIndices.length > 0 ? Math.min(...selectedIndices) : -1;

  const content: any = words.map((wordInfo, index) => {
    if (wordInfo.active) {
      const wordBlock: any = <WordBlock 
          key         = {index} 
          index       = {index} 
          word        = {wordInfo.word}
          main        = {selectedIndices.includes(index)}
          aux         = {selectedAuxIndices.includes(index)}
          type        = {categoriesGroups.find(elem => elem.ids.includes(index))?.sentiment ?? ''}
      />;

      if (index === toolbarIndex)
        return (
          <ToolbarPanel
            key             = {index}
            selected        = {selectedIndices}
            groups          = {categoriesGroups}
            onClose         = {handleDisableSelections}
            onDisableTones  = {handleDisableTonesSelections}
            onRegroup       = {handleRegroupSelections}
            onCategoryze    = {handleCategoryzeSelections}
          >
            {wordBlock}
          </ToolbarPanel>
        );
      else
        return wordBlock;
    }
    return wordInfo.word;
  });

  return (
    <div className='words-editor' onClick={handleWordsEditorClick}>
      {content}
    </div>
  );
}

字块：

// компонент: 'Слово'
const WordBlock: React.FC<IPropsWordBlock> = (props) => {
  console.log('word');
  // функция определяющая тип класса
  function prepareClassName() {
    // определить название классов для разных состояний слова
    const main: string  = props.main ? 'selected' : '';
    const aux: string   = props.aux ? 'selected-aux' : '';
    const type: string  = props.type;

    // сформировать классы
    return [(main !== '') ? main : type, aux].join(' ').trim();
  }

  // отрисовать компонент
  return (
    <span
      data-index  = {props.index}
      className   = {prepareClassName()}
    >
      {props.word}
    </span>
  );
}