Suspense yordamida UI’ni yaxshiroq boshqarish

React.Suspense ishlash usuli try/catch bloklariga o’xshaydi. Misol uchun, qanday qilib istalgan joydan xatolik(exception)ni throw qilib, keyin uni boshqa joyda (hatto boshqa modulda ham) catch qilish mumkin bo’lsa, Suspense ham shunga o’xshash tarzda ishlaydi (garchi to’liq bir xil bo’lmasa ham). Komponent daraxtida har qanday joyda kerakli paytda yuklanadigan va asinxron primitivlarni joylashtirishingiz va keyin daraxtning istalgan yuqori qismida, hatto boshqa faylda joylashgan Suspense komponenti orqali ham ularni catch bilan ushlab olishingiz mumkin.

Bu ma’lumotdan kelib chiqib, bizda 22 MB sidebar uchun yuklanish holatini (loading state) ko’rsatish joyini tanlash imkoniyati paydo bo’ladi. Masalan, biz sidebar yuklanayotgan paytda butun ilovani ko’rsatmasligimiz mumkin — bu yaxshi g’oya emas, chunki foydalanuvchidan ilovaning barcha ma’lumotlarini bloklaymiz, shunchaki faqat sidebar uchun — yoki faqat sidebar uchun yuklanish holatini ko’rsatamiz. Keling, birinchisini qanday amalga oshirishni ko’rib chiqaylik (garchi buni qilmasligimiz kerak), shunchaki Suspense imkoniyatlarini tushunish uchun:

import { lazy, Suspense } from "react";
 
const Sidebar = lazy(() => import("./Sidebar"));
 
const MyComponent = () => {
    const [showSidebar, setShowSidebar] = useState(false);
 
    return (
        <Suspense fallback={<p>Yuklanmoqda...</p>}>
            <div>
                <button onClick={() => setShowSidebar(!showSidebar)}>
                    Sidebar’ni almashtirish
                </button>
                {showSidebar && <Sidebar />}
                <main>
                    <p>Salom, bu ilovaning asosiy maydoni</p>
                </main>
            </div>
        </Suspense>
    );
};

Bu misolda, biz butun komponentni Suspense bilan o’rab olamiz va fallbackni (promise hal qilinmaguncha ko’rsatiladigan holatni) asinxron komponentlar hal qilinib bo’lmaguncha ko’rsatamiz. Bu degani, sidebar yuklanmaguncha butun ilova yashirin bo’lib turadi. Ba’zan bu foydali bo’lishi mumkin, masalan, hamma narsa tayyor bo’lganda foydalanuvchi interfeysini ko’rsatmoqchi bo’lsak, ammo bu holatda eng yaxshi g’oya emas, chunki foydalanuvchi nima bo’layotganini bilmay qoladi va ilova bilan muloqot qila olmaydi.

Shuning uchun, faqat kerakli paytda yuklanadigan komponentlarni o’rab olish uchun Suspenseni ishlatish kerak, quyidagicha:

import { lazy, Suspense } from "react";
 
const Sidebar = lazy(() => import("./Sidebar"));
 
const MyComponent = () => {
    const [showSidebar, setShowSidebar] = useState(false);
 
    return (
        <div>
            <button onClick={() => setShowSidebar(!showSidebar)}>
                Sidebar’ni almashtirish
            </button>
            <Suspense fallback={<p>Yuklanmoqda...</p>}>
                {showSidebar && <Sidebar />}
            </Suspense>
            <main>
                <p>Salom, bu ilovaning asosiy maydoni</p>
            </main>
        </div>
    );
};

Suspense chegarasi juda kuchli primitiv bo’lib, foydalanuvchi interfeysini yanada javob beruvchan va intuitiv qiladi. Agar yuqori sifatli skelet UI (Skeleton UI) fallback uchun ishlatilsa, foydalanuvchilarga yuklanayotgan komponentlar tugashi bilan nima sodir bo’lishini va ular nimani kutishlari kerakligini tushunishga yordam beradi. Bularning barchasidan foydalanish ilovalarimizning ishlash samaradorligini yaxshilash va React’dan maksimal darajada foydalanishning ajoyib usuli hisoblanadi.

Keyingi mavzuda, ko’plab React dasturchilari so’raydigan yana bir qiziqarli savolni ko’rib chiqamiz: qachon biz useStateni o’rniga useReducer ishlatishimiz kerak?