🔹تفاوت بین useEffect و useMemo و useCallback در ری اکت چیه؟

✔️ هوک useEffect در React برای انجام کارهایی استفاده می‌شه که اثر جانبی دارن. به عبارت ساده، وقتی می‌خوای بعد از رندر شدن کامپوننت کارهایی مثل دریافت اطلاعات از سرور، تغییر در DOM یا مدیریت اشتراک‌ها انجام بدی، useEffect وارد عمل می‌شه.

از useEffect معمولاً برای کارهایی مثل دریافت داده (data fetching)، اضافه و حذف کردن event listenerها، و انجام عملیات بعد از تغییر props یا state استفاده می‌کنن.

useEffect(() => {
  // Code to execute after rendering or when specified dependencies change
}, [dependencies]);

✔️هوک useMemo در React برای memoization استفاده می‌شه. Memoization یعنی ذخیره کردن نتیجه‌ی یک محاسبه‌ی سنگین تا فقط وقتی که وابستگی‌ها تغییر می‌کنن، دوباره محاسبه بشه. این کار باعث بهینه‌سازی عملکرد و جلوگیری از اجرای بی‌دلیل محاسبات می‌شه.

📌نکته: useMemo فقط مقدار خروجی رو کش می‌کنه، نه خود تابع رو!
اگه نیاز داری که خود تابع کش بشه (مثلاً برای پاس دادن به useEffect یا useCallback)، بهتره از useCallback استفاده کنی.

هوک useMemo برای کش کردن (cache) خروجی یک تابع یا یک عبارت استفاده می‌شه تا از انجام محاسبات غیرضروری جلوگیری بشه و عملکرد بهینه‌تر بشه.

const memoizedValue = useMemo(() => {
  // Expensive calculation or function
  return result;
}, [dependencies]);

✔️ هوک useCallback شباهت زیادی به useMemo داره، ولی به جای مقدار، روی تابع تمرکز می‌کنه و اون رو memoize می‌کنه. این هوک مخصوصاً وقتی مفید می‌شه که بخوای یک تابع رو به‌عنوان prop به کامپوننت فرزند بفرستی و از ایجاد توابع جدید در هر رندر جلوگیری کنی.

📌هوک useCallback یه تابع رو کش (cache) می‌کنه و فقط زمانی که وابستگی‌ها تغییر کنن، یه نسخه‌ی جدید از تابع می‌سازه. این کار باعث جلوگیری از رندر غیرضروری کامپوننت‌های فرزند می‌شه.

const memoizedCallback = useCallback(() => {
  // Function to memoize
}, [dependencies]);

‼️به طور خلاصه، هر کدوم از این هوک‌ها هدف خاصی دارن و ابزارهای مفیدی برای مدیریت بخش‌های مختلف یک کامپوننت React هستن. درک درست از زمان و نحوه‌ی استفاده‌ی useEffect، useMemo و useCallback می‌تونه به بهینه‌تر شدن عملکرد و نگه‌داری راحت‌تر اپلیکیشن‌های React کمک کنه.

Source : useMemo - useEffect - useCallback

🔵 <CodeHub/>

🎯 فرض کنید یه صفحه‌ی داشبورد داریم که توش یه لیست از کاربران نمایش داده می‌شه. این لیست از یه API دریافت می‌شه و هر کاربر یه دکمه برای انتخاب شدن داره. اما سه تا مشکل وجود داره:

1️⃣ هر بار که داشبورد باز می‌شه، درخواست جدید به سرور ارسال می‌شه، حتی اگه داده‌ها تغییری نکرده باشن.
✅ استفاده از هوک useEffect → داده‌ها رو فقط وقتی دریافت کن که کامپوننت لود می‌شه، نه در هر رندر.

2️⃣ یه محاسبه‌ی سنگین (مثلاً فیلتر کردن کاربران خاص) توی هر رندر دوباره اجرا می‌شه، حتی اگه لیست تغییر نکرده باشه.
✅ استفاده از هوک useMemo → لیست فیلتر شده‌ی کاربران رو فقط وقتی محاسبه کن که داده‌ها تغییر کنن، نه در هر رندر.

3️⃣ هر بار که یه کاربر انتخاب می‌شه، تابعی که هندلر کلیک هست دوباره ساخته می‌شه، که باعث رندر غیرضروری کامپوننت‌های فرزند می‌شه.
✅ استفاده از هوک useCallback → تابع کلیک روی کاربران رو ثابت نگه دار تا باعث رندر اضافی نشه.

📌 نتیجه: عملکرد بهتر، جلوگیری از درخواست‌های غیرضروری به سرور، و کاهش رندرهای غیرضروری! 🚀

🔵 <CodeHub/>

#Music

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

اریک اس. ریموند

🔴</CodeHub>

🔹هوک useTransition چیه و چه کاردبرد هایی داره؟


✔️ هوک useTransition توی React یه ابزاره که بهت اجازه می‌ده قسمت‌هایی از رابط کاربری رو به صورت پس‌زمینه (background) رندر کنی. به عبارت ساده، وقتی می‌خوای یه به‌روزرسانی state انجام بدی که ممکنه کار سنگینی باشه (مثلاً فیلتر کردن یه لیست بزرگ یا تغییر دادن محتوای یه تب) و نمی‌خوای این کار باعث وقفه و لگ توی رابط کاربری بشه، از useTransition استفاده می‌کنی.

🟡 وقتی useTransition رو بالای کامپوننتت صدا می‌زنی، دو تا چیز برمی‌گردونه:

1️⃣ مقدار isPending: یه فلگ که نشون می‌ده آیا یه Transition (یعنی به‌روزرسانی با اولویت پایین) در حال انجامه یا نه.
مثلاً اگه مقدارش true باشه، می‌تونی یه انیمیشن یا پیام "در حال پردازش" به کاربر نشون بدی.

2️⃣مقدار startTransition: یه تابع که هر کاری رو داخلش انجام بدی، به عنوان یه Transition اجرا می‌شه. یعنی stateهایی که داخل اون تابع آپدیت می‌شن، به صورت غیر مسدودکننده (non-blocking) انجام می‌شن.


🔆مثال ساده:

import { useState, useTransition } from 'react';

function MyComponent() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('home');

  function handleTabChange(newTab) {
    // به‌روزرسانی state به صورت Transition
    startTransition(() => {
      setTab(newTab);
    });
  }

  return (
    <div>
      <button onClick={() => handleTabChange('home')}>Home</button>
      <button onClick={() => handleTabChange('profile')}>Profile</button>
      {isPending && <span>در حال تغییر تب...</span>}
      <div>{tab === 'home' ? 'صفحه اصلی' : 'پروفایل'}</div>
    </div>
  );
}

❗️در این مثال، وقتی کاربر روی یکی از دکمه‌ها کلیک می‌کنه، تابع handleTabChange داخل startTransition اجرا می‌شه. به این ترتیب، اگر آپدیت state کار سنگینی باشه، به صورت پس‌زمینه انجام می‌شه و UI همیشه پاسخگو می‌مونه.

‼️ چند تا نکته :
1️⃣ هوک useTransition فقط داخل کامپوننت‌ها یا هوک‌های سفارشی قابل استفاده‌س.

2️⃣ اگه داخل تابع startTransition از عملیات async استفاده کنی، بعد از await هم باید آپدیت‌های state رو داخل یه startTransition دیگه قرار بدی تا اون‌ها هم به عنوان Transition در نظر گرفته بشن.

خلاصه اینکه، useTransition کمک می‌کنه تا به‌روزرسانی‌های سنگین و غیرضروری، بدون ایجاد وقفه توی تجربه کاربری، به صورت پس‌زمینه انجام بشن

🔵</CodeHub>

🔸 آشنایی با Access Token و Refresh Token

مفهوم Access Token چیست؟
- یک کلید دیجیتال کوتاه‌مدت (مثلاً ۱۵ دقیقه) است.
- برای دسترسی به منابع سرور (مثل APIها) استفاده می‌شود.
- پس از انقضا، دیگر معتبر نیست و کاربر باید توکن جدید بگیرد.

مفهوم Refresh Token چیست؟
- یک کلید دیجیتال بلندمدت‌تر (مثلاً ۷ روز) است.
- برای دریافت Access Token جدید بدون نیاز به ورود مجدد کاربر استفاده می‌شود.
- معمولاً امنیت بالاتری دارد و در سرور یا کوکی‌های امن ذخیره می‌شود.


⏳ فرآیند رفرش توکن به زبان ساده:
1. ورود کاربر (Login):
- کاربر نام کاربری و رمز عبور را وارد می‌کند.
- سرور یک Access Token (کوتاه‌مدت) و یک Refresh Token (بلندمدت) به کاربر می‌دهد.

2. انقضای Access Token:
- بعد از ۱۵ دقیقه (یا زمان تعیین‌شده)، Access Token منقضی می‌شود.
- اگر کاربر بخواهد عملیاتی انجام دهد (مثلاً داده بخواند)، سرور خطای 401 Unauthorized می‌دهد.

3. درخواست توکن جدید با Refresh Token:
- کلاینت (مثلاً مرورگر یا اپلیکیشن)، Refresh Token را به سرور می‌فرستد.
- سرور بررسی می‌کند:
- اگر Refresh Token معتبر باشد → Access Token جدید می‌سازد و برمی‌گرداند.
- اگر معتبر نباشد → کاربر باید دوباره لاگین کند.

4. تکرار درخواست اصلی:
- کلاینت، Access Token جدید را جایگزین می‌کند.
- درخواست اصلی کاربر (مثلاً دریافت داده) با توکن جدید دوباره ارسال می‌شود.


📌 چرا این مکانیزم مهم است؟
- امنیت: کاهش ریسک سرقت توکن (چون Access Token عمر کوتاهی دارد).
- تجربه کاربری: کاربر بدون دردسر لاگین مجدد، به کارش ادامه می‌دهد.
- کنترل دسترسی: سرور می‌تواند با باطل کردن Refresh Token، دسترسی کاربر را فوراً لغو کند.

درباره این مفهوم در این لینک بیشتر بخوانید

🔴</CodeHub>

🎯مهارت‌هایی که در آگهی‌های شغلی توسعه نرم‌افزار به صورت ریموت بیشترین تقاضا را دارند:

1 - Python - Appeared in 33.99% 🥇
2 - SQL - Appeared in 26.08% 🥈
3 - AWS - Appeared in 20.67% 🥉
4 - Java - Appeared in 14.56%
5 - React - Appeared in 12.54%
6 - Docker - Appeared in 11.23%
7 - JavaScript - Appeared in 10.47%
8 - Kubernetes - Appeared in 9.67%
9 - TypeScript - Appeared in 7.89%
10 - Node.js - Appeared in 7.45%

‼️نکته : پایتون به سرعت در حال رشد است به دلیل موج فعلی هوش مصنوعی که نیازمند حجم زیادی از کارهای داده‌ای است (که پایتون بهترین ابزار برای این کار محسوب می‌شه).


🔵<CodeHub/>

🎯مهارت‌هایی که در بالاترین میانگین حقوق را در نقش‌های توسعه نرم‌افزار ریموت دارند :

1 - Verilog
Average Salary: $234,168
Median Salary: $242,000
Maximum Salary: $333,700

2 - PyTorch
Average Salary: $230,668
Median Salary: $230,000
Maximum Salary: $365,400

3 - TensorFlow
Average Salary: $215,427
Median Salary: $220,000
Maximum Salary: $385,000

4 - Rust
Average Salary: $210,404
Median Salary: $215,000
Maximum Salary: $403,000

5 - Scala
Average Salary: $209,256
Median Salary: $210,000
Maximum Salary: $400,000

6 - Go
Average Salary: $207,840
Median Salary: $205,000
Maximum Salary: $390,000

7 - Kotlin
Average Salary: $205,492
Median Salary: $200,000
Maximum Salary: $380,000

8 - Haskell
Average Salary: $202,678
Median Salary: $201,000
Maximum Salary: $375,000

9 - Clojure
Average Salary: $201,444
Median Salary: $200,000
Maximum Salary: $370,000

10 - Spark
Average Salary: $198,765
Median Salary: $197,500
Maximum Salary: $365,000

❗️این لیست ۱۰ مهارت واقعاً منو شگفت‌زده کرد! در صدر این لیست Verilog قرار داره، زبانی که شاید خیلی از ما برنامه‌نویس‌ها حتی اسمش رو نشنیده باشیم. این یه زبان توصیف سخت‌افزار (HDL) هست که بیشتر در صنعت تولید چیپ و مخصوصاً توی آمریکا استفاده می‌شه. با اینکه تعداد فرصت‌های شغلی Verilog خیلی کمتر از Python یا Java هست، ولی حقوق بالایی داره که نشون می‌ده تقاضا برای این مهارت از عرضه بیشتره.

‼️ بجز Verilog، بیشتر مهارت‌هایی که بالاترین حقوق رو دارن مربوط به تحلیل داده و یادگیری ماشین هستن. این نشون می‌ده که بازار هوش مصنوعی چقدر داغه! اگه دنبال یادگیری یه مهارت جدید برای افزایش ارزش خودت توی بازار کار هستی، این لیست می‌تونه یه راهنمای عالی باشه.

🔵<CodeHub/>

تو دنیای سریعِ برنامه‌نویسی، اگه پیشرفت نکنی، یعنی داری عقب می‌مونی! تکنولوژی‌ها با سرعت عجیبی تغییر می‌کنن و کسایی که خودشونو به‌روز نگه می‌دارن، کلی سود می‌برن، اما اونایی که جا می‌مونن، خیلی زود از دور خارج می‌شن.

‼️رایج‌ترین اشتباهاتی که باعث عقب‌موندن برنامه‌نویسا میشن :‌

1️⃣ انتقاد پذیر نیستن و فیدبک هارو قبول ندارن.

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

- فیدبک باید حداقل یه تغییر کوچیک تو شیوه کدنویسی و مهندسی تو ایجاد کنه.

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

- به بقیه منتقلش کن! این یکی خیلی سادست؛ بهترین راه یادگیری، یاد دادنه.

2️⃣ اونا سوال نمی‌پرسن!

- اگه نمی‌دونی، بپرس! به این فکر نکن که "نکنه دارم وقت اون برنامه‌نویس رو می‌گیرم؟" یا "نکنه سؤالم احمقانه به نظر بیاد؟" چون وقتی واقعاً به اون اطلاعات نیاز پیدا کنی و بلد نباشی، خیلی بدتر به نظر می‌رسه!

3️⃣ از مشکلات سخت دوری می‌کنن!

- دیدم که بعضی از برنامه‌نویسا فقط میرن سراغ کارهای آسون و هیچ وقت جرات نمی‌کنن مشکلات سخت رو حل کنن. ولی این مشکلات سخت همون‌هایی هستن که بیشترین یادگیری رو برات دارن. اینا تو رو وادار می‌کنن که متفاوت فکر کنی و تکنولوژی‌های جدید رو برای حلشون امتحان کنی. اگه فقط همین مشکلات ساده رو حل کنی، تضمین می‌کنم که به عنوان یه برنامه‌نویس عقب می‌مونی.

4️⃣ اونا هیچ وقت روی پروژه‌های شخصی خودشون کار نمی‌کنن!

- هر برنامه‌نویسی باید سعی کنه پروژه‌های خودش رو بسازه.دلیل اصلی این کار اینه که هیچ راه بهتری برای به‌دست آوردن درک کامل از سیستم‌ها وجود نداره.
- می‌تونی خلاهای دانشت رو پر کنی و چیزایی مثل طراحی سیستم‌ها، مدیریت محصول، ادغام‌ها، احراز هویت، DevOps و غیره رو یاد بگیری.

5️⃣ اونا هیچ وقت نقش یا شرکتشونو تغییر نمی‌دن!

وقتی نقش خودتو تغییر می‌دی یا شرکتت رو عوض می‌کنی، چندتا اتفاق می‌افته:

- با هم‌تیمی‌های جدیدی آشنا می‌شی که می‌تونن چیزای جدیدی بهت یاد بدن.

- روی وظایف جدیدی کار می‌کنی که مجبور می‌شی متفاوت فکر کنی.

- با تکنولوژی‌های مختلف کار می‌کنی که باعث می‌شه مهارت‌های بیشتری پیدا کنی و رزومه‌ات رو برای فرصت‌های آینده غنی‌تر کنی.

6️⃣ سعی برای یادگیری بقیه حوزه ها ندارن!

- این ممکنه برای خیلی از برنامه‌نویسا عجیب باشه، مخصوصاً اونا که اصرار دارن زبان برنامه‌نویسی خودشون بهترینه!. حقیقت اینه که یاد گرفتن و تمرین زبان‌های مختلف، ارزش زیادی داره. در نهایت، زبان برنامه‌نویسی یه ابزار هست و باید بهترین ابزار رو برای کار انتخاب کنی. هیچ چیزی به اسم بهترین ابزار وجود نداره. برنامه‌نویسی که ابزارهای بیشتری داشته باشه، قابل تطبیق‌تر خواهد بود.

🔵 </CodeHub>

الگوریتم Quick Sort به زبون ساده! | یادگیری سریع و راحت 🚀

الگوریتم Quick Sort یکی از سریع‌ترین الگوریتم‌های مرتب‌سازیه که با روش "تقسیم و حل" کار می‌کنه! 🚀 توی این ویدیو یاد می‌گیری چطور داده‌ها رو با این الگوریتم بهینه و سریع مرتب کنی.

🔴 </CodeHub>

اینو دیدم برام جالب بود گفتم شما هم ببینید...

پرامپتی که نوشته بودن:
"یک برنامه‌ی پایتون بنویسید که یک توپ را نشان دهد که درون یک شش‌ضلعی در حال چرخش می‌جهد. توپ باید تحت تأثیر گرانش و اصطکاک باشد و هنگام برخورد با دیوارهای در حال چرخش به‌طور واقع‌گرایانه‌ای بازتاب کند."

@DevTwitter | <Sam92/>

15 پروژه اوپن سورسی که باید حتما بوکمارک داشته باشی:

1 - Frappe — Build Scalable Web Apps 🔧
2 - Permit.io — Simplified Access Control 🔒
3 - cal.com — Open-Source Scheduling Tool 🗓⌚️
4 - Screenshot-to-Code — Design to Frontend Code 🎨🔄
5. Sourcebot — Advanced Code Search 🎮⚡️
6. Mockoon — Local Mock APIs 🎮🚫
7. Plane — Simplified Agile Management ✈️
8. Activepieces — Low-Code Workflow Automation ⚙️⌛️
9. DevPod — Collaborative Dev Environments 🤖⚖️
10. SurrealDB — All-in-One Database 📊🌐
11. WunderGraph — API Workflow Optimizer 🔄🎡
12. Keep — Centralized Alert Management 🛎🌐
13. Akto — API Security Simplified ⚠️🔐
14. Podman Desktop — Simplified Container Management 🌬
15. Discourse — Modern Community Platform 🔗🌐

📚Source : LINK

🔵 </CodeHub>

یک بزرگواری تونسته بیاد سیستم پرامپت v0 و v0 Model رو پیدا کنه حالا گذاشته توی گیت هاب

بعد گفته به صورت دیفالت این مدل از موارد معمولی از GPT-4o استفاده میکنه و برای Reasoning از Deepseek و درآینده برای فیچر اینترنت سرچ Perplexity

https://github.com/x1xhlol/v0-system-prompts-models-and-tools

@DevTwitter | <Reza"/>

تایپ‌اسکریپت رو دارن با Go باز نویسی می‌کنن و تا الان ۱۰ برابر سریع‌تر از قبل شده. چیزی که خیلی جالبه اینه که تیم توسعه‌اش با C# خیلی نزدیکه (چون پشت جفتشون مایکروسافته) و حتی سازنده‌اشونم یکیه. اما با این حال با وجود رقابتی که الان بین C# و Go هست، اومدن Go رو انتخاب کردن.
این اتفاق به نظرم خیلی حرفا داره برای گفتن، اگه بخوایم سطحی نگاه کنیم اینطور نتیجه می‌گیریم که گولنگ > سی‌شارپ. ولی نتیجه معقولی که تو بحثا هست اینه که آدمای باتجربه و بزرگ دنبال ابزار درست برای حل مشکل می‌گردن و حتی اگه اون زبان رو خودشون ساخته باشن روش تعصب ندارن که بهترینه :)

🔗 لینک پست معرفی
🔗 لینک بحث توی گیت‌هاب

@Yasha

🔸 اگه می‌خوای اندازه Bundle پروژه‌ات رو کم کنی و سرعت لود سایت رو به شدت بالا ببری، باید چندتا نکته کلیدی رو رعایت کنی. 🚀

۱. تجزیه و تحلیل Bundle 🧐
چی کار می‌کنه؟
قبل از هر کاری، بفهم که چه چیزایی توی Bundle فضا رو می‌گیرند. ابزارهایی مثل Bundle Analyzer با نمودارهای تصویری کمک می‌کنن تا جزئیات و بخش‌های سنگین کد رو به راحتی شناسایی کنی.

۲. حذف وابستگی‌های غیرضروری ✂️
چرا مهمه؟
توی پروژه‌هات ممکنه dependency هایی وجود داشته باشه که یا اصلاً استفاده نمی‌شن یا به بهینه‌ترین شکل نوشته نشده‌اند. حذف یا جایگزینی این وابستگی‌ها می‌تونه اندازه Bundle رو خیلی کاهش بده.

۳. استفاده از Code Splitting 🔀
مفهوم کلی:
به جای اینکه کل کد رو توی یه فایل بزرگ بریزی، اون رو به قسمت‌های کوچکتر تقسیم کن.
مزایا:
- فقط بخش‌هایی که کاربر نیاز داره در ابتدا لود می‌شه.
- زمان بارگذاری اولیه کمتر می‌شود.
- تجربه کاربری بهتری فراهم می‌شود.
❗️تصور کن یه کتاب ضخیم رو بخونی؛ به جای اینکه کل کتاب رو یکجا بخونی، فقط فصل یا بخش مورد نیازت رو می‌خونی!

۴. استفاده از Tree Shaking 🌳
هدف این تکنیک:
حذف قسمت‌های غیرضروری کد که هرگز اجرا نمی‌شن، به طوری که فقط کدهای واقعی و کاربردی داخل Bundle بمونن.
نتیجه:
یک Bundle تمیزتر و بهینه‌تر که باعث بهبود عملکرد برنامه می‌شه.

💡 نتیجه‌گیری:
کاهش حجم Bundle باعث می‌شه سایت یا اپلیکیشن شما سریع‌تر، کارآمدتر و بهینه‌تر عمل کنه. این تغییرات نه تنها رضایت کاربران رو بالا می‌بره، بلکه از نظر SEO هم به بهبود رتبه سایت کمک می‌کن.

🔵</CodeHub>

🔹 چرا Code Splitting مهمه؟ 🚀

1 - افزایش سرعت لود:
با تقسیم کد به بخش‌های کوچکتر، نیاز نیست کل کد یکجا دانلود بشه، بنابراین صفحه سریع‌تر لود می‌شه. ⚡️

2 - صرفه‌جویی در منابع:
فقط زمانی که کاربر به یک بخش خاص از برنامه نیاز داره، اون بخش از سرور دریافت می‌شه، که بهینه‌سازی منابع رو به دنبال داره. 💾

3 - بهبود تجربه کاربری:
کاهش زمان انتظار برای بارگذاری کامل برنامه، مخصوصاً در دستگاه‌هایی با اینترنت کند، تجربه کاربری رو بهبود می‌بخشه. 😊

🔹 چطور Code Splitting در React انجام می‌شه؟ ⚛️

در React، می‌تونیم با استفاده از dynamic imports و ابزارهایی مثل React.lazy و Suspense، کد رو به بخش‌های کوچکتر تقسیم کنیم. برای مثال:

import React, { Suspense } from 'react';

// بارگذاری تنبل (Lazy Loading) یک کامپوننت
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function App() {
  return (
    <div>
      <h1>برنامه من</h1>
      {/* استفاده از Suspense برای نمایش fallback تا زمان بارگذاری کامپوننت */}
      <Suspense fallback={<div>در حال بارگذاری...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default App;

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


🔹 نکات کاربردی 🛠

تقسیم‌بندی مسیرها (Route-based Splitting):
در برنامه‌های چند صفحه‌ای، هر صفحه رو به صورت جداگانه بارگذاری کنیم تا زمان لود کاهش پیدا کنه.

پیکربندی ابزار Build:
ابزارهایی مثل Vite یا Webpack به‌طور خودکار از تکنیک‌های Code Splitting استفاده می‌کنن، اما می‌تونیم با تنظیمات دستی هم به این کار بپردازیم.

🔵</CodeHub>

در ادامه یک راهنمای کامل و بهبود یافته برای استفاده رایگان از Cursor ارائه شده است. لطفاً مراحل زیر را به ترتیب با دقت دنبال کنید:


---

گام ۱: خروج از حساب کاربری Cursor

1. خروج از حساب (Logout):
ابتدا از حساب کاربری Cursor خود خارج شوید. این کار تضمین می‌کند که تنظیمات قبلی یا اطلاعات ورود مانع روند ثبت‌نام جدید نشوند.


2. راه‌اندازی مجدد برنامه:
پس از خروج، برنامه Cursor را دوباره اجرا کنید تا مطمئن شوید در وضعیت خارج از حساب هستید.




---

گام ۲: اجرای PowerShell

1. باز کردن PowerShell:
برنامه Windows PowerShell را اجرا کنید. این محیط به شما امکان می‌دهد تا دستورات خط فرمان را وارد کرده و اسکریپت‌های لازم را اجرا کنید.


2. اجرای اسکریپت نصب:
در پنجره PowerShell، دستور زیر را وارد کنید:

irm https://raw.githubusercontent.com/yeongpin/cursor-free-vip/main/scripts/install.ps1 | iex

توضیح:

دستور irm مخفف Invoke-RestMethod است که فایل اسکریپت نصب را از گیت‌هاب دانلود می‌کند.

عملگر | خروجی دستور اول را به دستور دوم (که در اینجا liex است) می‌دهد.

با اجرای این دستور، اسکریپت نصب اجرا شده و فرآیند تنظیمات اولیه آغاز می‌شود.





---

گام ۳: ثبت‌نام جدید در Cursor

1. انتخاب گزینه ثبت‌نام:
پس از اجرای موفق اسکریپت، در منوی ارائه شده گزینه "Cursor New Register" را انتخاب کنید.


2. شروع فرآیند ثبت‌نام توسط ربات:
به محض انتخاب گزینه، ربات به صورت خودکار فعال شده و تلاش می‌کند شما را در سیستم ثبت کند.


3. نکات مهم در این مرحله:

فعال بودن فیلترشکن:
مطمئن شوید فیلترشکن (VPN) شما فعال است. این امر به دلیل محدودیت‌های جغرافیایی و دسترسی به سرورهای مورد نیاز ضروری است.

تأیید عدم ربات بودن:
قبل از کلیک روی دکمه مربوط به ربات، گزینه "من ربات نیستم" را فعال کنید. این اقدام از بروز خطاهای احتمالی در فرآیند ثبت‌نام جلوگیری می‌کند.





---

گام ۴: تکمیل ثبت‌نام و استفاده از Cursor

1. تغییر شناسه دستگاه:
پس از تکمیل فرآیند ثبت‌نام، شناسه (Machine ID) دستگاه شما تغییر می‌کند. این تغییر به معنای موفقیت‌آمیز بودن ثبت‌نام و فعال شدن خدمات رایگان Cursor است.


2. استفاده از نسخه جدید Cursor:
حالا می‌توانید از امکانات و ویژگی‌های جدید Cursor بهره ببرید.


3. پیشنهاد مهم:
توصیه می‌شود پس از تکمیل ثبت‌نام، از به‌روزرسانی (Update) خودداری کنید تا تنظیمات و دسترسی رایگان شما حفظ شود.




---

با دنبال کردن دقیق مراحل فوق، می‌توانید به راحتی از نسخه رایگان Cursor استفاده کرده و از امکانات آن لذت ببرید.

یک نفر اومده پرامتِ یکسانی رو رویِ ۱۸ مدل تست کرده. اینم نتیجه‌ش. فقط DeepSeek R1 که داره برعکس می‌چرخه. :))))

@DevTwitter | <Ayub Kokabi/>

سال نو شد و مثل یه ری‌استارت تازه، وقتشه که کدهای زندگی‌مونو بهینه‌تر و بی‌باگ‌تر بنویسیم! 😃💻

امیدوارم امسال همه‌ی پروژه‌هاتون بدون ارور بیلد بشه، هیچ باگی اذیتتون نکنه و همیشه توی گیت‌لایف موفق باشید! 🎯🚀

⚡️💙 عیدتون پر از شادی و موفقیت! 💙⚡️

#Figma_Template

Figma Template: Shop

Difficulty :  ⭐️⭐️⭐️

🔗Click for Get Link

🔴 </CodeHub>‌