Context API

اگر قراره یک داده بین چند کامپوننت مشترک باشه، لازم نیست اون و از چندین سطح Props عبور بدی .

به جاش از Context استفاده کن.

Suspense

همراه Lazy استفاده میشه.



<Suspense fallback={<Loading />}>
  <Dashboard />
</Suspense>



تا زمانی که فایل لود بشه، Loading نمایش داده میشه.

فرق useMemo و useCallback

✅ useMemo
مقدار (Value) را ذخیره می‌کند.

✅ useCallback
تابع (Function) را ذخیره می‌کند.

📌 یکی از سوال‌های پرتکرار مصاحبه React.

قبل از مصاحبه React اینارو مرور کن

useState
useEffect
useMemo
useCallback
React.memo
Context API
Lazy Loading
Suspense
Virtual DOM
Reconciliation

اگر اینا رو بلد باشی، نصف راه رو رفتی.

❓ Hoisting
چیه؟

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

⚠️کی دیروز به خاطر شرایط مالی نتونست ثبت نام کنه؟؟⚠️

به این آیدی پیام بده👇
@codelines_support
@codelines_support

🍪 فرق Cookie و Session چیست؟

وقتی وارد یک سایت می‌شی، سایت باید تو رو بشناسه. این کار معمولاً با Cookie و Session انجام می‌شه.

Cookie
: اطلاعات کوچکیه که داخل مرورگر ذخیره می‌شه؛ مثل زبان سایت یا شناسه ورود.

Session:
اطلاعات روی سرور نگهداری می‌شن و مرورگر فقط شناسه Session رو ذخیره می‌کنه.

📌 تفاوت اصلی:
Cookie داخل مرورگر ذخیره می‌شه.
Session معمولاً روی سرور ذخیره می‌شه.
Cookie می‌تونه مدت بیشتری باقی بمونه.
Session معمولاً بعد از مدتی منقضی می‌شه.

⚠️ اطلاعات حساس مثل رمز عبور را نباید مستقیماً داخل Cookie ذخیره کرد.
Cookie و Session از سؤال‌های پرتکرار مصاحبه‌های برنامه‌نویسی هستند.

Tab Network
فقط برای API نیست!

در تب Network می‌تونی این موارد رو ببینی:

✅ تصاویر
✅ فونت‌ها
✅ فایل‌های JS
✅ فایل‌های CSS
✅ درخواست‌های API

📌 یکی از مهم‌ترین ابزارهای هر Front-End Developer این تب توی مرورگره .

همه عاشق موفقیت‌اند،

اما کمتر کسی عاشق شب‌هاییه که با یک باگ تا صبح بیدار بمونه

همین شبا آینده کاری تو میسازه 👌🏻

🎯 چرا React از Virtual DOM استفاده می‌کنi؟

اگه هر تغییر مستقیماً روی DOM واقعی اعمال بشه، سرعت برنامه پایین میاد.

React
ابتدا تغییرات را روی Virtual DOM اعمال می‌کنه، سپس فقط بخش‌هایی که تغییر کردن رو به DOM واقعی منتقل می‌کنه.

✅ نتیجه:

رندر سریع‌تر
Performance بهتر
تجربه کاربری روان‌تر

📌 ترفند: Virtual DOM یک نسخه مجازی از DOM هستش ، نه جایگزین کامل اون.

🎯 چرا [] == ![] خروجی true می‌دهد؟

console.log([] == ![])
// true

اول ![] تبدیل می‌شود به false و بعد JavaScript موقع مقایسه نوع داده‌ها را تبدیل می‌کند.

📌 نتیجه نهایی:

[] == false // true

💡 یکی از سوال‌های WTF در مصاحبه‌های JavaScript.

🤯 می‌دونستی؟

NaN
تنها مقداری در JavaScript است که حتی با خودش هم برابر نیست!

console.log(NaN === NaN)
// false

اگر خواستی بررسی کنی مقدار NaN است یا نه:

Number.isNaN(value)

📌 این سؤال بارها در مصاحبه‌های JavaScript پرسیده شده.

📄 اگه فریلنسری کار می‌کنی، اینو جدی بگیر!

قبل از اینکه پروژه رو شروع کنی، حتماً یه قرارداد داشته باش.

لازم نیست پیچیده باشه، فقط اینا توش باشه:
✅ دقیقاً قراره چی تحویل بدی
✅ مبلغ پروژه و زمان پرداخت
✅ کی باید پروژه رو تحویل بدی
✅ چند بار اصلاح رایگانه
✅ فایل‌ها بعد از تسویه مال کیه
✅ اگه یکی وسط کار انصراف داد، تکلیف چیه

باور کن یه قرارداد ساده، می‌تونه جلوی کلی دردسر و بحث بیخودی رو بگیره. 😉

❌یادتون باشه دامنه و هاست رو همیشه به اسم خودِ مشتری بگیرید.

فردا روز مشکلی پیش اومد پاتون گیر نباشه

📄 رزومه برنامه‌نویسی رو چطوری بنویسیم؟

رزومه‌ت لازم نیست ۵ صفحه باشه؛ فقط باید حرفه‌ای باشه.

این چیزا رو حتماً داخلش بذار: ✅ مهارت‌هایی که بلدی ✅ پروژه‌هایی که انجام دادی ✅ لینک GitHub و پورتفولیو ✅ اطلاعات تماس
❌ لازم نیست هر دوره‌ای که گذروندی یا هر مهارتی که اسمش رو شنیدی داخل رزومه بنویسی!

یادت باشه، خیلی وقت‌ها یه پروژه خوب بیشتر از ۱۰ تا مدرک به چشم میاد. 🚀

🤯 می‌دونستی؟

در JavaScript آرایه هم در واقع یک Object محسوب می‌شه!

console.log(typeof [])
// "object"

برای اینکه بفهمی یک متغیر واقعاً آرایه است، از این استفاده کن:

Array.isArray([])

📌 نکته مصاحبه: typeof نمی‌تواند Array را از Object تشخیص دهد.

استفاده زیاد از:

position: absolute;

معمولاً نشونه طراحی ضعیفه.
اول سعی کن مشکلت رو با:
✅ Flexbox
یا
✅ CSS Grid
حل کنی.
Absolute باید آخرین انتخابت باشه، نه اولین.

🚀 ترفند CSS

اگر دکمه‌ای داری که متنش ممکنه طولانی بشه:

button{
min-width:max-content;
}

باعث میشه دکمه به اندازه محتوا بزرگ بشه و متن نشکنه.