Sử dụng React.lazy ra làm sao?

React 16.6 giới thiệu api mới, React.lazy, function này sẽ cho phép chúng ta render 1 component được import kiểu lazy load

Như trước đây chúng ta thường phải tự viết phần kiểm tra khi nào nên load, kết hợp với componentDidUpdate. Chúng ta không cần làm những công việc như vậy nữa, với api mới này

const LazyComponent = React.lazy(() => import('./Component'));

Wrap component này lại bên trong Suspense, trả fallback khi ko load được

<Suspense fallback={<div>Loading Component...</div>}>
  <LazyComponent />
</Suspense>

Sử dụng React.lazy để làm ví dụ sau

Demo

Source Github

Phần code sử dụng React.lazy không có gì cao siêu, thay vì import bình thường, chúng ta import bằng React.lazy.

const User = React.lazy(() => import('./User'));

//...

<React.Suspense fallback={<div>Loading Component...</div>}>
  {user && <User user={user} />}
  {loading ? (
    <div>Loading User...</div>
  ) : (
    !user && <button onClick={this.loadUser}>Press Me!</button>
  )}
</React.Suspense>

Chưa tìm được tài liệu chính thức về React.Suspense, mình chỉ giải thích nhanh

Suspense là một tính năng mới của React, có thể hiểu nó như là một Placeholder component, mà theo định nghĩa chính xác đầy đủ nhất

Suspense allows you to defer rendering part of your application tree until some condition is met (for example, data from an endpoint or a resource is loaded).

Tạm dịch: Suspense cho phép chúng ta defer render (render không đồng thời) một phần của tree đến khi thõa điều kiện ( thí dụ load xong data và resource )

Demo Suspense

React.lazy, What and how to use in your app