رياكت في الاصدار 18 اتجهو اكتر لتحسين الاداء وده كان ظاهر في اغلب الميزات الاعلانو عنها في الاصدار هاخدكم في جولة للتعرف علي بعض الميزات الجديدة واتمني يفيدكم :)

The New Root API #

زمان في رياكت كان بتم انشاء الجزر وبعدها بنلحق بيو تطبيق رياكت بتاعنا كده

const container = document.getElementById('root') 
ReactDOM.render(<App />, container);

الطريقة ده في رياكت ١٨ اتغيرت بقت كده

const container = document.getEleementById('root')
const root = ReactDOM.createRoot(container)
root.render(<App />)

startTransition API : #

وده عشان اشرحها هستخدم مثال بسيط ده زي انت بتتحكم في انك توري رياكت متين تبدا تنفذ الحاجه ده مثال بسيط في حقل البحث لو جيت تبحث في مربع البحث مجرد ما تكتب حرف حرفين في الخلفية بتكون عامل oncChange وبمش ريكوست بعدها للسيرفر ولاحظ هنا لسه الشخص ده م خلص الحاجه العاوز يكتبها ف مربع البحث ف كمية الريكوست الهتمشي هتكون كتيرة وده بقلل عملو ليك حاجه ممكن تعترض الحاجه ده وتخلي بعد يتم كتابتو وترسل وتاخد الاستجابة البتجي اسمها. startTransition وفي hooks اسمها useTransition

مثال

import { useTransition } from'react';
const [isPending, startTransition] = useTransition();
const callback = () => {
  // Urgent: Show what was typed
  setInputValue(input);
  // Mark any state updates inside as transitions
  startTransition(() => {
    // Transition: Show the results
    setSearchQuery(input);
  });
}
{isPending && <Spinner />}

Strict Effectsجات بدل (strictMode) #

وشرحتو في بوست سابق

auto Batching #

التجميع في رياكت عشان يتعمل للمكون رندر كان بتم وبتحقق حتي علي مستوي الاحداث يعني لو حصل حدث معين event واتغير الcomponent هيتم render للمكون مرة واحدة لكن ده كان علي الاحداث events وفي دوال كتيرة بستخدمها زي useMemo وغيرها عشان تتاكد يعمل رندر للمكون في حال حدوث event معين واتغيرت state حاليا الحاجه ده في رياكت ١٨ بقت مدمجة

Suspense List #

ومنها برضو suspense من خلالها بتقسم التطبيق بتاعك ويتحمل جزء جزء والعايزو يتحمل سريع طوالي بتختو برا

مثال

<Suspense fallback={<Spinner />}>
  {children}
</Suspense>

مثال لمجموعة

<SuspenseList revealOrder="forwards">
  <Suspense fallback={<LoadingSpinner />}>
    <CardComponent id={1} />
  </Suspense>
  <Suspense fallback={<LoadingSpinner />}>
    <CardComponent id={2} />
  </Suspense>
 </SuspenseList>

useDeferredValue #

بتاخد قيمة الحالة (state) وبترجع قيمة مؤجلة علي حسب المهلة المررتها وبتاخد بالملي ثانية الزمن زي ما في المثال التحت النص في الcard

مثال

function App() {
  const [text, setText] = useState("");
  const deferredText = useDeferredValue(text, { timeoutMs: 2000 }); 
  return (
    <div className="App">
    <input value={text} onChange={handleChange} />
      <CardLists text={deferredText} />
    </div>
  );
 }

SSR #

وبرضو اتكلمت عنها في بوست كان

المصادر

reactjs.org

dev.to

news react

dev.to