#استخدامی

خب آقای X، خانم Y، یه سوال React خفن!

سوال : useEffect  چی هستش اصلا کی به کار مون میادش  و چطور جلوی  (render) رندرای بی‌موردشو بگیریم؟ 

آقا  useEffect مثل یه دستیار باهوشه که می‌گه : «هی، اگه بخوای یه کار جانبی (side effect) تو کامپوننتت انجام بدی، من اینجام!» ✌🏻🌹

این کارای جانبی چی‌ان؟  دریافت داده از API
تغییر چیزی تو DOM (مثلاً تغییر title صفحه) 
تنظیم تایمر یا interval (مثلاً یه تایمر شمارش معکوس) 
اشتراک (subscribe) به یه سرویس (مثلاً WebSocket)

به عبارتی، هر چیزی که بخوای «خارج از رندر معمولی» کامپوننت انجام بدی، useEffect جای اونه!

مثال:

  useEffect(() => {
  fetch('https://api.example.com/users')
    .then(res => res.json())
    .then(data => setUsers(data));
})


مشکل کجاست؟😅🤏🏻

اگه حواست نباشه، useEffect هی رندر می‌کنه و اپ‌تو کند می‌کنه! 

راه‌حل: چطور جلوی رندر بی‌مورد رو بگیریم؟

اولی و اصلیش اینه که Dependency Array رو درست کن!


💥 همیشه یه آرایه به عنوان آرگومان دوم useEffect بده. این آرایه می‌گه useEffect کی باید اجرا بشه:

▫ [] → فقط یه بار موقع mount کامپوننت اجرا می‌شه (مثل componentDidMount).

▫ خالی نباشه یعنی  [variable] → هر وقت متغیر داخل آرایه تغییر کنه، useEffect اجرا می‌شه. 

▫ بدون آرایه → هر بار رندر، useEffect اجرا می‌شه (خطرناکه!).


⛔⛔⛔ پس کد بالا اصلا بهینه نیستش !!!


useEffect(() => {
  fetch('https://api.example.com/users')
    .then(res => res.json())
    .then(data => setUsers(data));
},[])


این درستشه ⚡


یه سوال خفن دیگه!

اومدن تو مصاحبه گفتن: «اگه بخوای useEffect فقط یه بار موقع لود کامپوننت اجرا بشه، چی کار می‌کنی؟»
جواب: یه آرایه خالی ([]) می‌ذاری!


سیو کن این پستو! اگه این سبک سوال و جواب به دلت نشست، یه 🔥 بذار و بگو بعدی چی باشه!   
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

https://t.iss.one/ProCode0101

یه روز یه بک‌اندی با یه دختر فرانت کار آمریکایی ازدواج می‌کنه اسم بچشون رو می‌زارن JASON.
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

https://t.iss.one/ProCode0101

فکر کن یه تازه کار بیاد اینو توی JS ببینه :)



حالا چرا به ترتیب مرتب نشده؟ جاوااسکریپت پیش‌فرض رشته‌ای (lexicographical) سورت می‌کنه،
وقتی جاوااسکریپت ساخته شد (دهه 90 میلادی)، هدف این بود که ساده‌ترین و سریع‌ترین روش مرتب‌سازی برای انواع داده‌ها (عدد، رشته، …) فراهم بشه. توی اون زمان، بیشتر داده‌هایی که توی وب استفاده می‌شدن، رشته بودن (مثلاً لیست اسامی، متن‌ها، آدرس‌ها و ...). این تابع هم از اون زمان مونده و بخاطر سازگاری عوضش نکردن ولی به پارامترش تابع مقایسه اضافه کردن که می‌شه عددم باهاش سورت کرد‌.
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

@ProCode0101

صفحه اکسپشن جدید لاراول رو دیدید؟ 🤩
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

https://t.iss.one/ProCode0101

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

اینجاست که دستکاری initial-scale خیلی کمک کنندس اندازه کل المنت هارو می‌شه باهاش کوچیک و بزرگ کرد بای دیفالت 1 هست ولی یکم باهاش ور برید و ببینید توی گوشی کدوم سایزش تجربه بهتری می‌ده، اون عدد رو بزارید همه مرورگرهام ساپورتش می‌کنن.

ولی اگه فرانت کاری حق نداری از این استفاده کنی. باید بری بیشتر یاد بگیری.
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

@ProCode0101

ری‌اکت‌کارا جمع شدن و یه گیت بوک توسعه دادن و توش از ترفند ها و تکنیک ها و نکاتی که بهشون خیلی کمک کرده نوشتن: این پتانسیل اینو داره توی بازار آزاد به اسم دوره ری اکت پیشرفته به قیمت 30 میلیون با تخفیف 23.500 فروش بره.

github.com/vasanthk/react-bits
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

https://t.iss.one/ProCode0101

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

کار کردن باهاش کاری نداره فقط کافیه این README رو بخونید :
github.com/yaronn/blessed-contrib
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

https://t.iss.one/ProCode0101

رفتم مسابقات Worldskills و در مرحله انتخابی مرحله جهانی شکست خوردم
خیلیا بهم میگن تجربه کسب کردی.خیلیا میگن انتظارت بیش از حد بود.خیلیا میگن ناراحت نباش
اما من خودم میدونم چقد براش تلاش کردم و حق دارم بابتش ناراحت باشم اما این ناراحتی جوری نیست که منو زمین بزنه یا بخواد حالمو بد کنه
ناراحتی از جنس حسرته ناراحتی از جنس تلاش بیشتر نکردنه
که همه اینا بهم انگیزه میده
ارتباط با ادمای خفن . رقابت با اونها و دیدن اونها بهم انگیزه میده تا بیشتر رشد کنم
درسته ایونت خیلی بزرگی بود درسته ادمای خفنی اونجان و قراره باشن اما من قطعا بیشتر تلاش میکنم و قطعا به اونچیزی که میخوام میرسم
اتفاقا خداروشکر میکنم امسال نشد چرا؟
شاید در بهترین و واقع بینانه ترین حالتش مدال برنز میگرفتم ولی من حاضرم دوباره کار کنم دوباره سختی بکشم تا برنزو تبدیل به طلا کنم و سال بعد طلارو بگیرم
چون تجربه و انگیزه ای که دارم که کمتر کسی اونو داره و همین منو سه هیج جلو میندازه
به امید روزای خوب و پر از موفقیت ✌️🏽

🔺 حرکت جالب Stackoverflow

- اگه از چت‌جی‌پی‌تی و ... استفاده می‌کنین ولی دلتون پیش Stackoverflow هست، می‌تونین از سرویس جدید این شرکت استفاده کنین که شباهت زیادی به چت‌بات های امروزی داره ولی جواب‌هایی به سبک Stackoverflow میده:

https://stackoverflow.ai

#links

مدالیون برتر گرفتم ❤️😊
همین الان نتایج مدالیون رو گفتن
قطعا سال بعد با مدال میام قوی تر

🔺نسخه رسمی 16 Next.js منتشر شد

- به این نسخه React Compiler و جدیدترین قابلیت‌های React 19.2 اضافه شده. این نسخه به‌صورت پیش‌فرض از ماژول باندلر Turbopack استفاده می‌کنه که سرعت خیلی بالاتری توی رفرش و بیلد برنامه داره

جزییات بیشتر:
https://nextjs.org/blog/next-16

آمارهای جالب GitHub از فعالیت توسعه‌دهنده‌ها توی سال ۲۰۲۵

ظاهر سایت پی اچ پی، مدرن تر می‌شه

زبان پی اچ پی یه مسابقه گذاشته بود، که ظاهر سایتش رو کاربرا بازطراحی کنن و به بهترین تغییر هم جایزه بده و هم اعمالش کنه؛

برنده این طراحی در اومد:
nunoguerra.com/dev/php

نسخه قبلی که هفته های آینده به بالایی بروز می‌شه:
php.net
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

https://t.iss.one/ProCode0101

✅ برای محاسبه border-radius خارجی یک المنت با استفاده از padding و border-radius المنت داخلی میتوان از فرمول ساده زیر استفاده کرد:

outer-radius = inner-radius + padding

🔺برای مثال: یه المان با مشخصات border-radius: 24px و padding: 8px داریم، برای محاسبه border-radius المان داخلی خواهیم داشت:

24px - 8px = 16px

🔺رعایت این نکته باعث میشه طراحی های اصولی تر و حرفه ای تری داشته باشیم.
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

https://t.iss.one/ProCode0101

✅ تفاوت Authorization و Authentication چیه؟

🔺 به طور کلی Authentication یعنی احراز هویت. یعنی بررسی کردن اینکه کاربر مورد نظر کی هست. برای مثال وقتی توی برنامه‌ای عملیات لاگین انجام می‌دیم، در واقع داریم Authentication انجام می‌دیم و می‌خوایم به برنامه بگیم که ما کی هستیم و هویت ما چیه.

🔺 ولی Authorization یعنی اجازه یا مجوز. یعنی بررسی کردن اینکه کاربر مورد نظر اجازه انجام دادن یک کار خاص رو داره یا نه. برای مثال می‌خوایم بررسی کنیم که آیا یک کاربر اجازهٔ دسترسی به یک فایل یا قسمت رو داره یا نه.
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

@ProCode0101

توی گزارش 2025 گیتهاب، زبان TypeScript پرمشارکت ترین زبان و بعد از اون Python توی رتبه دوم قرار داره.
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

@ProCode0101

💾 فشرده‌سازی نام فیلدها در MongoDB برای بهینه‌سازی فضا و کارایی

گاهی وقت‌ها حجم داده در MongoDB اون‌قدر زیاد میشه که حتی چند بایت کمتر در هر سند، در مقیاس بزرگ تبدیل به چند گیگابایت صرفه‌جویی میشه!

یکی از روش‌های ساده برای بهینه‌سازی، کوتاه‌کردن نام فیلدها (Field Name Compression) هست.
توی این سری از پست ها سعی میکنم نکات کاربردی MongoDB با مثال عملی با هم پیش ببریم.
اگر از این محتوا لذت بردین، حتما پست ذخیره کنین و برای دوستاتون هم بفرستین.
برای دیدن توضیحات لینک زیر مراجعه کنید.
https://www.linkedin.com/posts/delzendeh_mongodb-2-activity-7391338734320992256-K1rj?utm_source=share&utm_medium=member_desktop&rcm=ACoAAA6jGs8B6Xsuwj5ptm3WhFPuUawh0SpUyvE
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

@ProCode0101

اگه خواستی یه اپ بسازی که دوتا کاربر بتونن مستقیم با هم چت کنن یا ویدیوکال بزنن بدون اینکه همه چیز از سرور رد شه، PeerJS رو یه تستی کن، یه کتابخونه‌ی جاوااسکریپتیه که با WebRTC کار می‌کنه و باعث میشه مرورگرا خودشون بدون هیچ سروری به هم وصل شن و داده، صدا یا ویدیو ردوبدل کنن.

دقت کنید اصلا سرور لازم نداره (یه دیتای کوچیکی توی ارتباط اولیه قرار انتقال پیدا کنه که اونو با سرور خودش انجام می‌ده) فقط کافیه با چند خط کد یه Peer بسازی، آیدی بگیری و به یکی دیگه وصل شی. هم برای پروژه‌های دانشجویی عالیه هم برای یادگیری مفاهیم شبکه و P2P.

peerjs.com
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

@ProCode0101