17 نکته تجربی از یه دولوپر سنیور ری‌اکت:

https://www.frontendjoy.com/p/17-tips-from-a-senior-react-developer

پ‌ن: به نظرم نکات خوبی گفته. نکاتی که در عین سادگی شاید اصلا بهشون توجه نمی‌کنیم.

@Mern_stack_01

تو ری‌اکت یه اصطلاح داریم به اسم God Component.
به کامپوننت هایی گفته می‌شه که خیلی بزرگ باشن و خیلی چیزا تو یه کامپوننت نوشته شده باشن.
مثل api fetch, form validation, state management, error handling و …

استفاده از God Component یه ردفلگ شناخته می‌شه.
چون تو همچین کامپوننتی دیباگ تقریبا غیرممکنه.

یه “return” سرچ کنی 20 تا result میاره.
یا مثلا می‌بینی 30 ثانیه‌ست فقط داری اسکرول می‌کنی.

اینا نشونه هایی از God Component هستن.

@Mern_stack_01

Next.js | Nuxt.js | Nest.js

@Mern_stack_01

فقط prop هایی که کامپوننت بهشون نیاز داره رو ارسال کنید.

// 🚩 Red flag
<UserAvatar user={user} />

// ✅ Better
<UserAvatar avatarUrl={user.avatarUrl} name={user.name} />

کد اول علاوه بر ایجاد Coupling، تو شرایطی باعث re-render های اضافی می‌شه.

@Mern_stack_01

تلگرام: اگه مجبور بودم تو لینکدین دنبال کار بگردم قطعا خودمو می‌کشتم.

@Mern_stack_01

کارشناس QA: وقتی رو دکمه کلیک می‌کنم پروژه کرش می‌کنه.

دولوپر: خب روش کلیک نکن.

@Mern_stack_01

Ralph Johnson: Before software can be reusable, it first has to be usable.”

«قبل از اینکه نرم‌افزار reusable باشه، باید usable باشه.»

@Mern_stack_01

یه جا دیدم نوشته بود “برنامه‌نویسی که نتونه بدون Ai کد بزنه برنامه‌نویس نیست”

به نظر من این جمله مثل این می‌مونه که بگیم “هر کی نتونه بدون گوگل برنامه‌نویسی کنه برنامه‌نویس نیست”
در نتیجه جمله اشتباهیه.

هوش مصنوعی تا حد زیادی جای سرچ به روش قدیمی رو گرفته و این که استفاده از Ai خوبه یا نه، بستگی به نحوه استفاده شخص داره.

@Mern_stack_01

وقتی ورودی یا متغیری واحد اندازه‌گیری داره، بهتره تو اسمش ذکر شه:

❌
const timeout = 3000;

✅
const timeoutMs = 3000;

@Mern_stack_01

انتهای 99 درصد وبینار های فارسی:

یه دوره آماده کردیم که ارزش واقعیش 999999 میلیارد تومنه اما به خاطر گل روی شما شرکت‌کننده‌ها تخفیف خورده و می‌تونید با مبلغ 990 هزار تومن ثبت‌نام کنید.

پ‌ن: شرکت‌کننده هم شاخ داره حتما.

@Mern_stack_01

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

@Mern_stack_01

جونیور:

const filtered = products.filter(...)

سنیور:

- اگه 100هزارتا محصول باشه چی؟
- آیا memoization نیازه؟
- آیا این filter باید server-side باشه؟
- آیا Cache نیازه؟
- آیا UX مناسبه؟
- آیا re-render اضافی داریم؟
- ا complexity این الگوریتم چیه؟
- و …

@Mern_stack_01

خودشون خنده‌شون نمی‌گیره واقعا؟
چطور روشون می‌شه اصلا؟

خدا عقل داده خب.

@Mern_stack_01

تو ری‌اکت یه مفهوم داریم به اسم Derived Data (داده مشتق‌‌شده)
به اون دسته از اطلاعاتی گفته می‌شه که از طریق یسری محاسبات روی یک یا چند استیت به دست میاد.

فرضا سه تا دیتا با اسامی firstName, lastName و fullName رو داریم که fullName از طریق concat شدن‌ اون دوتای دیگه به دست میاد.
اینجا اصطلاحا به fullName گفته می‌شه derived data.

ترجیحا بهتره همچین دیتاهایی به صورت state تعریف نشن:

// ❌
const [firstName, setFirstName] = useState(“”);
const [lastName, setLastName] = useState(“”);

const [fullName, setFullname] = useState(“…”);

// ✅
const [firstName, setFirstName] = useState(“”);
const [lastName, setLastName] = useState(“”);

const fullName = firstName + lastName;

@Mern_stack_01

چیت‌شیت وی‌اس‌کد (کلیدهای میانبر + اکستنشن های کاربردی)

@Mern_stack_01

اسنپ‌فود:

@Mern_stack_01