𝗛𝗼𝘄 𝗔𝗱𝘃𝗮𝗻𝗰𝗲𝗱 𝗥𝗲𝗮𝗰𝘁 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝗦𝗵𝗼𝘂𝗹𝗱 𝗧𝗵𝗶𝗻𝗸 𝗔𝗯𝗼𝘂𝘁 𝗛𝗼𝗼𝗸𝘀

اکثر توسعه‌دهندگان Hooks را بدون درک نحوه رندر شدن React یاد می‌گیرند. این موضوع باعث سردرگمی می‌شود. برای تسلط بر Hooks، باید پنج مسئولیت اصلی را درک کنید:

• به‌خاطر سپردن داده‌ها • اجرای Side Effects • اشتراک‌گذاری داده‌ها • بهینه‌سازی رندرینگ • کنترل Scheduling

تغییرات State باعث ایجاد Re-render می‌شوند. هر بار که رندر مجدد انجام می‌شود، متغیرها، اشیاء و توابع دوباره ساخته می‌شوند. همین واقعیت ساده توضیح می‌دهد که چرا useMemo و useCallback وجود دارند.

درک Hooks

State و ترتیب فراخوانی React وضعیت (State) را در یک لیست پیوندی (Linked List) متصل به Fiber کامپوننت ذخیره می‌کند. به همین دلیل است که نمی‌توانید Hooks را داخل شرط‌ها یا حلقه‌ها فراخوانی کنید. React برای یافتن State صحیح، به ترتیب فراخوانی‌ها متکی است.

واقعیت Batching وقتی setState را فراخوانی می‌کنید، React یک به‌روزرسانی را زمان‌بندی می‌کند. مقدار بلافاصله تغییر نمی‌کند. به همین دلیل است که اگر بلافاصله بعد از تنظیم State، آن را لاگ بگیرید، مقدار قدیمی را مشاهده می‌کنید. همیشه از الگوی Functional Update استفاده کنید تا از داده‌های قدیمی (Stale Data) جلوگیری کنید:

مدل ذهنی useEffect از برخورد با useEffect مانند یک Lifecycle Method خودداری کنید. از آن برای همگام‌سازی (Synchronize) کامپوننت خود با سیستم‌های خارجی مانند APIs یا WebSockets استفاده کنید.

مهم: React قبل از اجرای useEffect صفحه را رندر (Paint) می‌کند. این کار تضمین می‌کند که Effect شما باعث مسدود شدن UI نشود. اگر نیاز دارید DOM را قبل از اینکه کاربر آن را ببیند اندازه‌گیری کنید، از useLayoutEffect استفاده کنید.

واقعیت useRef یک Ref فقط برای عناصر DOM نیست؛ بلکه یک ظرف تغییرپذیر (Mutable Container) پایدار است. React مرجع (Reference) یکسانِ شیء را بین رندرها حفظ می‌کند. تغییر دادن ref.current باعث ایجاد Re-render نمی‌شود. از آن برای تایمرها، سوکت‌ها یا مقادیر قبلی استفاده کنید.

تله‌ی Memoization useMemo دکمه‌ای جادویی برای افزایش سرعت نیست. این کار هزینه‌ی اضافی (Overhead) دارد؛ زیرا React باید کش را ذخیره کرده و وابستگی‌ها (Dependencies) را با هم مقایسه کند.

تنها زمانی از useMemo استفاده کنید که هزینه محاسبات بیشتر از هزینه Memoization باشد. اگر از آن برای محاسبات ریاضی ساده استفاده کنید، اپلیکیشن خود را کندتر می‌کنید.

Context مدیریت State نیست Context برای تزریق وابستگی (Dependency Injection) است و به شما کمک می‌کند از Prop Drilling جلوگیری کنید. با این حال، وقتی مقدار یک Context تغییر می‌کند، تمام Consumerها دوباره رندر می‌شوند. کل State جهانی خود را در یک Provider قرار ندهید. Contextهای خود را بر اساس کاربردشان تقسیم کنید.

Advanced Patterns • useReducer: Use this for complex state machines instead of many useState calls. • startTransition: Use this to keep your UI responsive during heavy updates. • useDeferredValue: Use this to delay expensive UI updates while the user types.

Write clean code by moving logic into custom hooks. A 1200-line component is hard to maintain. Five small, logic-owning hooks are easy to scale.

Source: https://dev.to/jagadeesh_008/how-advanced-react-developers-should-think-about-hooks-102l