Sawtaytoes
12/8/2018 - 8:51 PM

Asynchronous React Component Loading

Asynchronous way of loading a React component. Note, you need to include the fallback prop, or it won't work.

App.js
content_copyfile_download
import React, { lazy, Suspense } from 'react'
import ReactDOM from 'react-dom'

const TestComponent = (
  lazy(() => (
    import('./TestComponent')
  ))
)

const LoadingMessage = () => (
  "I'm loading..."
)

const App = () => (
  <Suspense fallback={<LoadingMessage />}>
    <TestComponent />
  </Suspense>
)

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)