message: core-components: memo LogViewer LogLines
diff: * limitations under the License.
  */
  -import React from 'react';
  +import React, { useMemo } from 'react';
  import { AnsiChunk, AnsiLine, ChunkModifiers } from './AnsiProcessor';
  import startCase from 'lodash/startCase';
  import clsx from 'clsx';
  @@ -150,9 +150,14 @@ export function LogLine({
  searchText,
  highlightResultIndex,
  }: LogLineProps) {
  - const chunks = calculateHighlightedChunks(line, searchText);
  -
  - const elements = chunks.map(({ text, modifiers, highlight }, index) => (
  + const chunks = useMemo(
  + () => calculateHighlightedChunks(line, searchText),
  + [line, searchText],
  + );
  +
  + const elements = useMemo(
  + () =>
  + chunks.map(({ text, modifiers, highlight }, index) => (
  <span
  key={index}
  className={clsx(
  @@ -165,7 +170,9 @@ export function LogLine({
  >
  {text}
  </span>
  - ));
  + )),
  + [chunks, highlightResultIndex, classes],
  + );
  return <>{elements}</>;
  }
  