React 18v

1.render API

2.batching

3.new hooks

Render API

Foydalanuvchi reactni ustanovka qilganda console da quyidagi xatolikka duch keladi

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

ReactDOM.render 18v da ishlamaydi createRoot dan foydalanish maslahat beriladi

createRoot ni qanday ishlatamiz ?

before holati biz yuklagan vaqtda chiqib turadi va xatolik beradi bu 17v . Biz ushbu holatni pastdagi rasmdagidek ozgartirishimiz kk

sodda qilib aytganda shunchakiy 1-chi rasmdagi holatni 2-rasm holatiga keltirsangiz kifoya xatolik yo`qoladi.

Batching

Biz react 18v gacha bir nechta state yangilansa page ham shuncha marta yangilanish muamosiga duch kelar edik. Tabiyki bu saytni sekin ishlashiga olib keladi

bu muamo 18v da hal qilindi yaniy barcha ozgarayotgan statelar ozgarib bolmagunicha page yangilanmaydi

Quyidagi rasmda 2ta ozgaruvchini funksiya yordamida ozgartiramiz. Bu holatda sahifa 1 marta render boladi (yangilanadi) . Agar 17v bolganida har bir ozgaruvchi uchun alohida yangilanar edi.

Sahifa yangilanayotganini console orqali tekshirib olamiz

18v da button bosilganda consolega 1ta render chiqadi

17v da button bosilganda consolega 2ta render chiqadi (nechta ozgaruvchi o`zgarsa shuncha render chiqadi)

agar biz 18v dan foydalanayotganimizda har bir state ozgarganida alohida alohida page render bolishi kk bolsa ozgaruvchini flushSync(()=>{}) ga orab qoyishimiz kk boladi

new Hooks

useTransition()

Internet sekin ishlashi natijasida amallar bajarilayotganda sayt qotib qoladi. Bu kopchilik foydalanuvchilar uchun noqulay holat. Bu holatni oldini olish uchun react 18v bir nechta hook lar taklif qildi . (bu bizga internetni tezlashtirib bermaydi shunchakiy oppoq ekran orniga chiroyli spinner chiqazib beradi)

useTransition

misol uchun 4000 ga yaqin malumotlari bolgan bazani filter qilamiz

natija kelguncha bolgan vaqtni boshqarishimiz aynan useTransition bn boladi

U 2 ta qiymat qabul qiladi

const [isPending, startTransition] = useTransition();

useTransition ni import qilib olishimiz kk

isPending false holatda boladi . Qachonki natija vaqtni talab qilsa true ga aylanadi

{isPending && <Spinner />}

isPending true bolganda yaniy malumot kelishi vaqt talab qilganida Spinner aylanib tursin (Spinner ornida ixtiyoriy narsa bolishi mumkin)

startTransition calback qabul qiladi. bajarilishi kk bolgan amal calback ichiga yozib qoyiladi.

useDebugValue

useTransition bn oxshash holatda ishlatiladi farqi bu avvalgi qiymatni ekranga chiqazib turadi

const deferredValue = useDeferredValue(value);

input value si differedValue ga tenglashtirib qoyiladi data da differedValue bor yoqligi tekshiriladi

yuqoridagi 2ta hookda ham tezkor amal bajarilayotganda internet sekin ishlashi, saytni qotib qolishini chiroyli korinishga olib kelish uchun ishlatiladi