ماهو <Activity /> في عالم react؟

ميزة جديدة وجميلة من react للتعامل مع اظهار واخفاء المكونات وتحسين الاداء

ماهو <Activity />
ما علاقته بتحسين الاداء؟
ماهي فكرته؟
شكل استخدامه
اشترك في النشرة البريدية

تم اطلاق Activity component في react 19.2 للتعامل مع اخفاء واظهار العناصر بشكل مناسب للاداء ولتقليل العمليات الغير ضرورية اثناء تصفح موقعك المبني باستخدام react وما يتبعها.

ما علاقته بتحسين الاداء؟

عند الاغلاق باستخدام useState او باستخدام الشروط عموما (if - else) يتم اعادة تصفير قيم الجزء المخفي وهذا لوحده يعتبر اداء اضافي على موارد الجهاز وسرعة الموقع واذا قمت بالاخفاء عبر css باستخدام display: none; فكانك يابو زيد ما غزيت لأن انت نعم اخفيت العنصر ولكن كامل العنصر مازال شغال بكامل عملياته في الخلفية وهذا حمل على الذاكره وعلى موارد الجهاز

ماهي فكرته؟

وهنا فكرة Activity component تظهر بقوة بحيث انه يمكنك من اخفاء العنصر بالاضافة لايقاف عملياته بشكل حرفي يعني حتى تصفير القيم لن يتم، يعني لو كان عندك input مكتوب بداخله “السلام عليكم ورحمة الله وبركاته” واغلقت الفورم او الـinput ورجعت فتحته رح تلاقي “السلام عليكم ورحمة الله وبركاته” موجودة كما هي وهنا استفدنا امرين اولا ما سببنا حمل اضافي على الموقع ثانيا حافظنا على البيانات للرجوع لها (لأن في بعض الحالات نحتاج هذا الموضوع)

شكل استخدامه

tsx

import { Activity, useState } from 'react';
import AdminSettings from './_components/AdminSettings';
const page = () => {
  const [IsOpen, setIsOpen] = useState<boolean>(false);
  return (
    <div>
      <Activity mode={IsOpen ? 'visible': 'hidden'}>
        <AdminSettings />
      </Activity>
    </div>
  );
};
export default page;

import { Activity, useState } from 'react'; import AdminSettings from './_components/AdminSettings'; const page = () => { const [IsOpen, setIsOpen] = useState<boolean>(false); return ( <div> <Activity mode={IsOpen ? 'visible': 'hidden'}> <AdminSettings /> </Activity> </div> ); }; export default page;