React Memo

20 دقیقه Article

بهینه‌سازی با React.memo ⚡

وقتی کامپوننت پدر رندر می‌شود، تمام فرزندانش هم دوباره رندر می‌شوند. برای جلوگیری از این اتفاق در کامپوننت‌های سنگین، از React.memo استفاده می‌کنیم.

چطور کار می‌کند؟

React.memo یک HOC (Higher Order Component) است که props قبلی و جدید را مقایسه می‌کند. اگر props تغییری نکرده باشند، رندر مجدد انجام نمی‌شود.

در این بخش یاد گرفتید که چگونه منطق برنامه را کنترل کنید و ظاهر آن را تغییر دهید. ترکیب قدرت جاوااسکریپت با انعطاف‌پذیری CSS در React به شما اجازه می‌دهد تجربه‌های کاربری خلاقانه‌ای بسازید.

مدیریت وضعیت (State Management) 🧠

در React، داده‌ها همیشه از بالا به پایین (Top-Down) جریان دارند. اما وقتی برنامه‌ها پیچیده می‌شوند، مدیریت این جریان دشوار می‌شود. اینجاست که ابزارهایی مثل Context API و Redux وارد می‌شوند.

نکته امنیتی: هرگز اطلاعات حساس (مثل رمز عبور یا کلید API) را در کدهای کلاینت‌ساید ذخیره نکنید. کدهای React در مرورگر کاربر قابل مشاهده هستند.

تمرین‌های عملی

برای تثبیت یادگیری این درس تمرین‌های زیر را حل کنید

مموریز کردن Medium

سوال تمرین

کامپوننت Header را با React.memo بپیچید تا از رندر اضافی جلوگیری شود.

پاسخ تمرین

export default React.memo(Header);

آماده رفتن به درس بعدی هستید؟

این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.

برای ذخیره پیشرفت وارد شوید

ParsRepo