React Suspense lazy loading tanpa fallback

Question

Saya ingin memuat komponen secara malas untuk mengurangi ukuran bundel awal saya dan mendapatkan komponen dengan cepat menggunakan pemisahan kode menggunakan react router.

Namun, saat menggunakan React Suspense, mereka memaksa Anda untuk menggunakan fallback untuk memuat.
Ini tidak akan berhasil:

const lazyLoadComponent = Component =>
    props => (
        <Suspense> // Missing fallback property
            <Component {...props} />
        </Suspense>
    );

Dalam kasus saya, saya merender html dari server jadi saya tidak ingin menggunakan spinner.
Ini akan membuat flicker tidak berguna di layar saya! Yaitu:

• Html dimuat
• Placeholder muncul
• PageComponent untuk rute akan dimuat
• Saya memiliki spinner sendiri yang memuat feed dari dalam komponen halaman

Dalam kasus saya, html sesuai dengan komponen react yang dimuat.

Apakah ada peretasan yang diketahui untuk mengatasi masalah ini dengan mudah (kecuali untuk membuat loader untuk rute apa pun yang menyalin html (!!), yang akan membuat pemuatan lambat tidak berguna).

Saya agak tidak senang dengan "memaksa" kami untuk menambahkan loader dan saya tidak memahami logika di balik keputusan untuk menjadikannya wajib.

Answer 1

Coba gunakan pemisahan kode di dokumen

fallbackprops hanyalah sebuah elemen React, Anda dapat mengaturnya null.

<Suspense fallback={null}>
    <ComponentImportedByLazy />
</Suspense>

Answer 2

Saya membuat masalah untuk ini di Github: https://github.com/facebook/react/issues/19715

Tidak ada solusi bersih saat ini yang menggunakan React-Router / React.
Namun hal ini diramalkan dalam rilis mendatang menggunakan mode bersamaan. Seperti yang disebutkan oleh Dan Abramov:

Mengenai permintaan fitur konkret Anda, saya rasa saya dapat membingkai ulang sedikit berbeda. Bukannya Anda menginginkan "penggantian opsional" karena itu tidak masuk akal untuk layar baru (kami harus menunjukkan sesuatu). Saya yakin Anda sedang mencari cara untuk melewati menampilkan fallback jika konten sudah dalam HTML. Inilah tepatnya bagaimana React berperilaku dalam Concurrent Mode sehingga permintaan fitur sudah diimplementasikan (dan pada akhirnya akan menjadi perilaku default dalam rilis stabil).

Bagi saya tidak masalah untuk menunggu, jadi saat ini saya akan menghilangkan rute pemuatan lambat karena ini menyangkut proyek-hobi dan saya punya waktu untuk menunggu rilis di masa mendatang.