Загружать компонент, когда он используется

Если в коде есть не используемый компонент, то его исходный код всё равно будет загружен, что может влиять на производительность кода.

// Загрузка двух компонентов
// хотя в коде вызывается только один из них
import Photos from './Photos';
import Comments from './Comments';

class App extends React.Component {
  render() {
    let tab = 'photos';

    return (
      <>
        // будет вызван один из компонентов
        {tab === 'photos' ? <Photos /> : <Comments />}
      </>
    );
  }
}

Чтобы загружать компонент тогда, когда он ипользуется, для этого используется динамичный импорт, реализуемый через React.lazy().

import React, { Suspense } from 'react';
const Comments = React.lazy(() => import('./Comments'));
const Photos = React.lazy(() => import('./Photos'));

class App extends React.Component {
  render() {
    let tab = 'photos';

    return (
      <>
        // Внутри Suspense указываются компоненты React.lazy()
        <Suspense fallback={<div>Загрузка...</div>}>
          // будет загружен только один из компонентов
          {tab === 'photos' ? <Photos /> : <Comments />}
        </Suspense>
      </>
    );
  }
}

В коде также используется компонент <Suspense>, внутри которого используются компоненты, созданные через React.lazy().

В атрибуте fallback указывается код (или компонент), который будет показываться пока не сгенерирован контент.