Dynamic loading of REACT components?

Question

React

Is it possible to load components like this or is it better through React.lazy ?
What are the pitfalls of the dual approach?

// @flow
import * as React from 'react';
import * as MovieLayouts from './Layouts';
import { Rating } from './constants';
import type { MovieType, RecommendationsType } from '../../types';
import styles from './Movie.less';

type MoviePropsType = {
  movie: MovieType,
  recommendation: RecommendationsType,
  layout: String,
};

const setColorBorder = (rating) => {
  switch (rating) {
    case Rating.GOLD: return styles.borderGold;
    case Rating.SILVER: return styles.borderSilver;
    default: return '';
  }
};

const initializeComponent = layout => MovieLayouts[`${layout}MovieLayout`];

export const Movie = (
  { movie, recommendation, layout } : MoviePropsType
) => {
  const rating = setColorBorder(recommendation && recommendation.rating);
  const MovieLayout = initializeComponent(layout);

  return (
    <MovieLayout
      movie={movie}
      rating={rating}
    />
  );
};

Answer 1

Where is your download? Webpack will simply put everything in Layouts into a bundle.
I advise you to connect the webpack-bundle-analyzer to analyze the contents of the bundle.