Lazy-loading React components

Tasavvur qiling siz kafedasiz va faqatgina bir finjon kofe buyurtma berdingiz, ammo hisob kelganida nafaqat kofe uchun balki shu kafeda mavjud bo'lgan boshqa taom-u ichimliklar uchun ham pul to'lashingiz kerakligi yozilgan. Shu payt qanday holatga tushgan bo'lardingiz? Shok bo'lib qolsangiz kerak. Yemagan somsasiga pul to'lash bu achinarli bir holat axir. Ammo siz norozilik bildira olmaysiz, chunki kafening ishlash tartibi shunday. Hisobdagi mablag'ni to'laysiz va bu kafega qaytib kelmaysiz. Ho'sh ho'sh, bu nega kafe haqida gapiryapti deyotgan bo'lsangiz kerak, bu shunchaki bir o'xshatish edi xolos. Web platformamizga qaytadigan bo'lsak, bizning foydalanuvchilarimiz bu kafening mijozi, biz(dasturchilar) esa kafening egasi hisoblanamiz. Agar foydalanuvchi faqatgina bir componentga so'rov yuborgan bo'lsa, misol uchun registration/sign-up formasiga, boshqa sahifalar uchun ma'sul bo'lgan JavaScript bundle(codelar jamlanmasi)larini ham qo'shib jo'natgan bo'larmidingiz? Agar qo'shib jo'natsangiz foydalanuvchiga noqulaylik tu'gdirgan bo'lmaysizmi ya'ni kerakli sahifaning yuklanishi sekin bo'ladi, interactive holatga kelishi uchun ko'proq vaqt ketadi. Browser JavaScript kodni parse qilish bilan mashg'ul bo'larkan, foydalanuvchi g'amgin yuz bilan bo'sh sahifaga qarab o'tiradi. Bizning bechora foydalanuvchimiz esa bu holatga asl sababchi biz dasturchilar ekanligimizni bilmagan holda kutib o'tiraveradi. Bunday holatlarni oldini olish uchun esa biz lazy-loading dan foydalanamiz. Birinchi navbatta bizga kerakli bo'lgan componentni Reactning lazy() funksiyasi orqali yuklab olamiz va uni Suspense componenti bilan o'rab qo'yamiz.

import { lazy, Suspense } from "react"

// componentni lazy yordamida yuklash quyidagicha amalga oshiriladi
const JSHeavyMapComponent = lazy(() =>
  import("./js-heavy-map-component")
);

// Property page component
export default function Property() {
  const [showMap, setShowMap] = useState(false);

  return (
    <>
      <h1>Rental Property</h1>
      <article>
        <h2>Property description</h2>

        {/* dinamik componentni Suspense bilan o'raymiz */}
        {showMap && (
          <Suspense fallback={<p>Loading...</p>}>
            <JSHeavyMapComponent />
          </Suspense>
        )}
        <button onClick={() => setShowMap(true)}>Show map</button>
      </article>
    </>
  );
}

Endi Property page yuklanganda JSHeavyMapComponent unga qo'shib yuklanmaydi. Qachonki biz show map buttonini bosganimizdagina yuklanadi. Bu esa Property pageni yuklanishini tezroq qiladi va dasturimiznining performance ni oshiradi. Suspense ning fallback propiga istalgan react elementi/componentini berishingiz mumkin. Lazy loading component yuklangunicha fallback render bo'ladi.