Как да мемоизирате статичен JSX блок вътре в компонент без да го изнасяте в отделен компонент? Какъв масив с зависимости е необходим?

Чтобы замемоизировать статичный JSX-блок внутри компонента без вынесения в отдельный компонент, можно использовать хук useMemo из React.

Пример:

import React, { useMemo } from 'react';

function MyComponent() {
  const staticBlock = useMemo(() => (
    <div>
      <h1>Статичный заголовок</h1>
      <p>Этот блок не зависит от пропсов и состояния.</p>
    </div>
  ), []); // Пустой массив зависимостей

  return (
    <div>
      {staticBlock}
      {/* Другой JSX */}
    </div>
  );
}

Здесь массив зависимостей пустой ([]), так как блок статичен и не зависит от внешних данных. Это гарантирует, что JSX-блок будет вычислен один раз при монтировании компонента и не будет пересоздаваться при ререндере.