React 19, nimalar o'zgardi?

Dasturchi sifatida ishlatadigan texnologiyangizdagi yangiliklardan habardor bo'lishingiz kerak. Yaqinda React ning 19-versiyasi stabil holatga o'tdi. Bu postda 19-versiyada chiqqan o'zgarishlar bilan tanishasiz.

Post ikki qismdan iborat, birinchisi 19-versiyada chiqqan yangiliklar va Reactda qaysi qismlar yaxshilangani haqida. Keling yangiliklardan oldin nimalar yaxshilangani bilan tanishamiz.

ref ni props sifatida berish

ref larni props qilib berish uchun forwardRef dan foydalanishga majbur bo'lar edik va bu ortiqchi ish keltirib chiqarardi. Unda yozilgan kod esa bu holarda bo'lar edi:

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  // ...
});

Endi esa refni to'g'ridan to'g'ri props qilib berish mumkin

function MyInput({placeholder, ref}) {
  return <input placeholder={placeholder} ref={ref} />
}

//...
<MyInput ref={ref} />

ref uchun cleanup function

Agar ref biror componentda ishlatilsa, bu component UI dan olib tashlanganda (unmount) ref ni tozalash kerak bo'ladi. Bu xotirani samarali boshqarishga, kutilmagan holatlarni oldini olish uchun muhim. Avvalgi versiyalarda bu useEffectning return qismida yozilar edi:

function Example() {
    const ref = useRef(null);

    useEffect(() => {
        ref.current = null; // Reset ref if needed
    }, [/* dependencies */]);
}

19-versiyadagi o'zgarishdan so'ng yuqoridagi kod quyidagicha yoziladi:

<input
  ref={(ref) => {
    // ref created

    // NEW: return a cleanup function to reset
    // the ref when element is removed from DOM.
    return () => {
      // ref cleanup
    };
  }}
/>

useDeferredValue ga boshlang'ich qiymat berish imkoniyati

initialValue nima uchun berilishi yaxshi bilasiz, shu sababli keyingi bo'limga mumkin )

Metadatalarni qo'llab quvvatlash

meta, title kabi meta elementlarni kerakli sahifaga berish uchun useEffect ichida yoki react-helmet kabi kutubxonalardan foydalanishga to'g'ri kelardi.

19-versiyada bu teglarni to'g'ridan to'g'ri ishlatish imkoniyati qo'shildi.

function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        Eee equals em-see-squared...
      </p>
    </article>
  );
}

React component ni render qilganda meta teglarni avtomatik

elementi ichiga o'tkazadi.

Stillarni qo'llab quvvatlash

Bu versiyada stillarni optimizatsiya qilishga ham e'tibor qaratishgan, bunda stillarni kerakli vaqtda yuklab olish imkoniyati va precedence atributi qo'shilgan. Bu atribut orqali stillarning DOM ga qo'shilish tartibini boshqarish mumkin. Stillar o'ziga bog'liq component mount bo'lishidan oldin yuklanadi.

Asinxron scriptlarni qo'llab quvvatlash

Huddi stillarga o'xshab asinxron scriptlarni kerakli vaqtda yuklab olish mumkin. Stillar va asinxron scriptlarni yuklaydigan component bir nechta joyda ishlatilganda ularni qayta yuklab olishi haqida o'ylamasangiz ham bo'ladi, chunki birinchi marta yuklanganda keshga saqlangan bo'ladi )

Resurslarni oldindan yuklash

Qaysidir resursni imkon qadar tez yuklab olish sayt performance'iga yaxshi ta'sir qiladi. Bu imkoniyatdan foydalanish uchun React 19 da yangi API lar e'lon qilindi. Bular quyidagilar

preinit - resursni tezda yuklab olib ishlatish uchun (scriptlar yoki modullar);
preload - resursni avvaldan yuklab olish uchun, bu holatda yuklangan resursni tezda ishlatish shart emas (fontlar, stillar)
preconnect - resurs yuklamoqchi bo'lgan serverga connection ochadi, bu esa resurs yuklanish vaqtini tezlashtiradi.
prefetchDNS - preconnect ga o'xshab ishlaydi, farqi connection hosil qilmasdan resurs uchun so'rov yuborilishidan oldin uni yuklab oladi va keshda saqlab turadi.

Custom elementlarni qo'llab quvvatlash

Oldingi versiylarda custom elementlar ishlatilganda React propslarni tanimagan, yangi versiyadan boshlab ularni muammosiz ishlatish mumkin. Custom elementga misol -> <my-element />.

Note - ba'zi joylarda kod orqali misollar berilmadi, misollarni bu yerda ko'rishingiz mumkin