Reintroducing React: V16 and Beyond/

...

/

Using React.lazy and Suspense

Using React.lazy and Suspense

In this lesson, we'll discuss how using React.lazy and Suspense make things easy.

We'll cover the following...

Easy Dynamic Imports

React.lazy and Suspense make using dynamic imports in a React application so easy.

For example, consider the demo code for the Benny application below:

Press + to interact
import React from 'react'
import Benny from './Benny'
import Scene from './Scene'
import GameInstructions from './GameInstructions'
class Game extends Component {
  state = {
    startGame: false
  }
  render () {
    return !this.state.startGame ? 
        <GameInstructions /> : 
		<Scene />
  }
}
export default Game;

Based on the state property startGame, either the GameInstructions or Scene component is rendered when the user clicks the “Start Game” button.

GameInstructions represents the home page of the game and Scene represents the entire scene of the game itself.

Imp

...