React.js Questions

Prop Drilling vs Context API

Prop drilling:

• داده از چندین لایه عبور می‌کند (کلافگی)

Context API:

• دسترسی مستقیم بدون پاس‌دادن زنجیره‌ای

Performance

• React.memo: جلوگیری از رندر غیرضروری.
• useMemo / useCallback: جلوگیری از محاسبات/تابع‌های تکراری.
• Lazy loading / Code splitting: بارگذاری بخش‌ها به صورت جدا.
• Virtualization: نمایش فقط بخشی از لیست (react-window).

const Other = React.lazy(() => import("./Other"));
<Suspense fallback={<div>Loading...</div>}>
  <Other />
</Suspense>;

مفاهیم های مهم در React

Virtual DOM

• بطور خلاصه و ساده Virtual DOM یک نسخه مجازی و کوچک شده از DOM اصلى وبسايت شماست كه React از اون برای اعمال سریع تغییرات روی سایت استفاده میکنه. انجام اينكار باعث ميشه كه فقط همان المانی که تغيیر داشته ، در اU بروزرسانی بشه . در React ، به ازای هر Element در DOM واقعی ، يک Element در دام مجازی وجود دارد . ( یعنى در ازاى هر div در DOM ، يك div با همان خصوصيات و ویزگی ها در دام مجازی وجود دارد)

Virtual DOM vs Dom

• بروزرسانی DOM خیلی كند و زمانبره اما در عوض بروزرسانی VDOM ( دام مجازی ) خيلى سريعتره ! چون در دام مجازی چیزی در صفحه ، نمايش داده نميشه .

چرا Virtual DOM سريعتر از DOM هست ؟

به عنوان يک Front-End Enginner بايد دليل سريعتر بودن دام مجازى رو بدونيم . زمانیکه یک Element به اU وبسايت اضافه ميشه ، بلافاصله يک دام مجازى ايجاد ميشه. به محض تغيیر در خصوصیات يا حالات هرکدوم از این Element ها ، يک دام مجازی ديگه ايجاد ميشه . در اين مرحله VDOM اول با VDOM دوم مقايسه ميشه. بعد از اين مقايسه ، مشخص ميشه كه چه Element هايى تغيير داشتن و بايد توى ui هم تغيير كنن

در این مرحله دام مجازى بهترين و مناسبترين روش براى اعمال اين تغييرات به DOM اصلى رو پيدا میکنه و اون تغییرات رو به DOM واقعى اضافه ميکنه. انجام اینكار باعث میشه که کمترین زمان و هزینه برای بروزرسانی DOM صورت بكيره .

مزایای کتابخانه ری اکت چیه؟

دام مجازی یا Virtual Dom

• در حقیقت ما در اپلیکیشن های ری اکتی به جای ارتباط مستقیم با دام اصلی، با دام مجازی ارتباط برقرار میکنیم
• به طور خلاصه دام مجازی یک نسخه مجازی و کوچک شده دام اصلی وب سایت شماست که ری اکت از اون برای اعمال سریع تغییرات روی سایت استفاده میکنه

کامپوننت های ریوزبل (Reusable)

• ری اکت به ما اجازه میده کامپوننت هایی بسازیم که قابلیت استفاده مجدد دارند

رندر سمت سرور در ری اکت (Server Site Rendering or SSR)

• خب SSR یعنی صفحات ما به جایه اینکه در مرورگر رندر بشن، میتونن سمت سرور رندر بشن
• در نتیجه SSR باعث میشه که اپلیکیشن ما با سرعت خیلی بیشتری رندر بشه و همچنین در Seo به ما کمک میکنه

هوک ها (React Hooks)

• در نسخه 16.8 ری اکت هوک های کاربردی و فوق العاده ای معرفی کرده که هر کدام از این هوک ها کار خاصی برای ما انجام میدن

معایب کتابخانه ری اکت چیه؟

سرعت بالاى تغيير !

ری اکت یک كتابخونه جاوا اسكریپتی هست كه بشدت در معرض تغييره! تو نسخه هاى قبلى منتشر شده از ری اکت به وضوح دیدیم که چقدر تغییرات گستردە ای داشته.

بطور مثال اضافه شدن هوک ها ، منسوخ شدن class Component ها و ... قطعا این تغيیرات مفید بودن اما خب پروژه هایی كه با React توسعه داده ميشن هميشه بايد بروزرسانی بشن.

این شما هستید که باید انتخاب كنید که حاضر به بروزرسانی مداوم پروزه هستید یا نه! ( کتابخونه های دیگه ای هستن که سرعت تغییر خیلی پایین تری دارن)

ری اکت یک فریمورک نیست!

اگه به معماری MVC نگاه کنیم میبینیم که کتابخانه ری اكت فقط بخش View رو داره کنترل میکنه! و

برای Controller و Model به ابزار ها و کتابخانه های جانبی احتیاج داره.

همین باعث میشه که ساختار و الگو های ضعیفی داشته باشیم. درصورتیکه در فریمورک های جاوااسكريپتى مثل Angular چنين مشكلاتى رو نداريم!

مشکل سئو در ریكت !

گرچه این مورد ثابت نشده اما تجربه نشون داده که Crawler ها توانایی مناسبی در سئو کردن سایت های ری اکتی ندارن. این صرفا در حد یک نگرانیه و البته که راه حل هایی برای این مشكل وجود داره.

اما بهرحال سئو در ریکت یکی از چالش های اصلی این کتابخونه ی دوست داشتنیه.

Reconciliation

• دام مجازی ( Virtual DOM ) یک مفهوم برنامه نویسیه که در آن یک نمایش مجازی از ui تو حافطه نگهداری میشه. همگام سازی این دام مجازی با دام واقعی تو ری اکت توسط کتابخانه ReactDom انجام میشه و به این فرایند در ری اکت reconciliation میگیم

React Fiber

تا قبل از نسخه ١۶ رى اكت، منطق ومعماری Rendering رى اكت مشكلاتى داشت. همچنین پروسه reconciliation در ريكت مشكلات مشابهی داشت. فیسبوک كه متوجه این مشكلات شده بود در سال ٢٠١٧ فايبر رو معرفى كرد. React Fiber يكسرى تغييرات الكوريتمى روى عملكرد Rendering ريكت اعمال ميكرد و مشكلات اون رو رفع ميکرد. در حقیقت نحوه كدنویسى وکاربا React هيچ تغييرى نكرد، فقط نحوه اجرا و عملكرد الگوريتمی کتابخانه React تغییر کرد. این تغییرات در نسخه ١۶ ری اکت در سال ٢٠١٧ در دسترس عموم قرار گرفت. هدف دیگه ی معرفی React Fiber بهبود كارایی هسته رى اكت تو جاهايى بود كه انيميشن داشتيم یا میخواستیم روی Layout کار كنیم.

Lifting State Up

همونطور که میدونیم کامپوننت های ری اکت میتونن شامل State هایی باشن که بهشون نیاز دارن. در حقيقت ميتونیم داده هاى هر كاميوننت رو بوسيله State تو خود کامپوننت ذخیره كنیم. حالا فرض كنید یک کامیوننت داریم که ٢ کامپوننت فرزند داره و میخوایم یک داده مشترک رو تو هر ٢ کامپوننت استفاده كنیم. برای این سناریو ٢ راه داریم :

1- تو هر كامپوننت فرزند يک State بسازيم و State رو اونجا مديريت كنيم. (يعنى دو State)

2 -با توجه به یکسان بودن State بين هر دو کامپوننت، صرفا يک State در كامپوننت والد بسازيم و به کامپوننت های فرزند پاس بدیم. ( یعنى يك State)

منطقا روش 2، روش بهتريه چون بجاى State جداكانه، يك State مرجع ساختيم.

و Lift Up State همونطور كه از اسمش پيداست به اين معنى هست كه State خودمون رو به كاميوننت والد منتقل كنيم.

State Less

• اگە یک کامپوننت داشته باشیم که داخلش هيچ State داخلى نداشته باشیم، به اون کامیوننت stateless Component ميكیم. يعنى كاميوننت بدون state.

State Full

• اگه تو کامپوننت خودمون حداقل يک state داشته باشيم (به كمك هوک useState ) اين يعنى کامپوننت ما stateFull هست. در کل به کامپوننت هایی كه State داخلى دارن statefull component ميكيم.

Angular Vs React

• انگولار یک فریمورک کامله که تمامی ابزار های مورد نیاز شمارو داخل خودش داره اما ری کت یک كتابخانه هست هست و اکثر ابزارهای مورد نياز رو داخلش نداره. ( بايد بصورت پكیج يا كتابخانه هاى خارجى نصب كنيد )
• ری اکت فقط بخش view یک MVC رو به ما ميدە درصورتیكه انگولار کل MVC رو یوشش میده.
• ری اكت از Virtual DOM استفاده ميكنه ولى Angular از دام واقعى (Real DOM) استفاده میکنه.

useTransition Vs useDeferredValue

هر دوتاش برای «پرفورمنس و روان بودن UI» هستن

اما کاراکترشون فرق می‌کنه:

useTransition :

• داداش بزرگه → میگه “یه کار سنگین داری؟ اشکالی نداره! بذارش تو صف. من UI رو قفل نمی‌کنم.”

useDeferredValue :

• نسخه لایت → میگه “این مقدار خیلی سریع عوض میشه؟ من یه نسخه کندترش رو می‌سازم، نگرانی نیست!”

1. useTransition یک “به‌روزرسانی” رو به تعویق می‌اندازه

• میگه این آپدیت مهم نیست، بذار بعداً انجامش بدم.

مثلاً:

• تغییر یک لیست سنگین
• رندرهای پیچیده
• سوییچ کردن صفحه پر از دیتا

const [isPending, startTransition]
 = useTransition();

startTransition(() => {
  setSearchQuery(inputValue);
});

// مثال واقعی
// کاربر صفحات یک جدول ۱۰هزار ردیفی رو عوض می‌کنه و نمیخوای صفحه قفل بشه
startTransition(() => {
  setPage(n);
});
// کلیک سریع انجام میشه، رندر سنگین چند میلی‌ثانیه عقب‌تر.

اینجا تو عملاً می‌گی: این setState رو آروم انجام بده، UI رو فریز نکن.

2. useDeferredValue یک “مقدار” رو به تعویق می‌اندازه

هدف: مقدار ورودی (مثلاً تایپ) سریع آپدیت بشه، ولی کار سنگین با نسخه کندتر انجام بشه.

const deferredValue = useDeferredValue(value);

// مثال واقعی
// یک اینپوت داری که با هر تایپ باید یک لیست بزرگ فیلتر بشه و تایپ تند و تیز میمونه، فیلتر ها بعدها انجام میشه

const deferred = useDeferredValue(input);
const results = useMemo(() => filter(bigList, deferred), [deferred]
);

تو چیزی رو deferred نمی‌کنی؛ فقط نسخه دیرکردش رو استفاده می‌کنی.

کِی کدومو استفاده کنیم؟

useTransition :

• سوییچ بین صفحات
• فیلتر یا sort سنگین
• آپدیت‌های بزرگ DOM
• انیمیشن + دیتا

useDeferredValue :

• کارهای سنگین وابسته به ورودی کاربر
• سرچ‌های بزرگ
• و autocomplete با دیتاهای سنگین
• و debounce-like behavior اما به سبک React

useEffect Vs useLayoutEffect

useEffect :

• بعد از render و بعد از paint اجرا می‌شه.

useLayoutEffect :

• قبل از paint ولی بعد از render اجرا می‌شه. (سینکرون!)

useEffect

• خب React کامپوننت رو render می‌کنه
• و DOM آپدیت می‌شه
• صفحه به کاربر پِینت می‌شه
• حالا useEffect اجرا می‌شه (async)

این یعنی برای چیزهایی مناسب است مثل:

• درخواست API
• و event listenerهای غیر حساس
• ذخیره‌سازی
• لاگ گرفتن
• پاکسازی‌ها

چون UI فریز نمی‌شه.

useLayoutEffect

• خب React کامپوننت رو render می‌کنه
• قبل از paint، بلاک‌کننده اجرا می‌شه
• اگر DOM رو تغییر بدی، paint بدون فلیتر اتفاق می‌افته

پس مناسب برای:

• اندازه‌گیری DOM (مثل offsetWidth، height)
• دستکاری همگام DOM
• انیمیشن‌های بسیار دقیق
• هماهنگی با کتابخانه‌هایی مثل GSAP

مهم‌ترین تغییرات React19 چی هست؟

use() :

• برای خواندن Promise و data fetching با Suspense

React Forget :

• برای auto memoization و performance بهتر

useFormStatus :

• برای مدیریت state فرم

useOptimistic :

• برای optimistic UI

Actions :

• برای اجرای مستقیم server function بدون API

Suspense در React 19 چه پیشرفتی کرده است؟

خب Suspense در React 19 بخش اصلی data fetching شده است.

قبلاً بیشتر برای:

• lazy loading components

استفاده می‌شد.

اما حالا برای:

• data fetching
• async rendering
• streaming UI

استفاده می‌شود.

چرا React در حال حرکت به سمت Server Components است؟

• کاهش JavaScript bundle
• بهبود performance
• انتقال data fetching به server
• کاهش hydration cost