وقتی میخوام با بودجه ای که دارم کار استارت اپ انجام بدم:

@AlirezaJsTs

چرا اصلا ما باید از useEffect استفاده کنیم؟

برای مثال فکر کنید یک اینپوت فرم دارین که به کاربر امکان این رو میده که زمانی که اسم کشوری رو وارد کرد، اطلاعات اون کشور رو براش نمایش بده
خوب چه زمانی میخاین fetch انجام بشه و اطلاعات اون کشور برای کاربر نمایش داده بشه؟

زمانی که کاربر وارد سایت شد؟
زمانی که یک re-render در کامپوننت اتفاق افتاد؟
یا فقط زمانی که کاربر اسم کشور مورد نظرش رو وارد فرم کرد؟

خوب باید بگم useEffect به ما اجازه میده تا کدهامون رو در زمان های مختلف اجرا کنیم،
این زمان ها شامل , Mount, Re-render و Unmount شدن کامپوننت ها هستن


▪️چرا fetch رو نباید بیرون از useEffect یا event handler انجام بدیم؟؟

یک مبحث داریم به نام side effects
هر فعالیتی که کامپوننت ما با بیرون از اسکوپ خودش داشته باشه بهش side effect میگیم، مثل:

Data fetching, setting up timers, writing to dom, mutating external variables

طبق باگ هایی که side effects برامون به وجود میارن ما نباید از side effects در render logic استفاده کنیم بنابراین فقط اجازه داریم side effect رو یا داخل event handlers و یا useEffect استفاده کنیم
مثلا وقتی که ما یک Http ریکوئست رو، که یک ارتباط با دنیای بیرون هست (یک side effect هست)، داخل render logic تعریف میکنیم چه اتفاقی می افته؟


function RenderLogic() {
const [lists, setLists] = useState([]);

const res = await fetch('apilink');
const data = await res.json();

setLists(data);
}

دقت کنین که تو این مثال ما کدهامون رو
در top level کامپوننت نوشتیم
اینجا وقتی fetch انجام میشه، ما state رو با قرار دادن data داخل setter function (setLists) آپدیت میکنیم و خوب همونطور که میدونید با آپدیت شدن state کامپوننت ما دوباره رندر میشه، و اینجا با رندر شدن کامپوننت دوباره fetch انجام میشه و state دوباره آپدیت میشه و این چرخه همینطور ادامه پیدا میکنه و باعث re-render های زیادی میشه که infinite loop نامیده میشه
که برای جلوگیری از infinite loop ما از useEffect استفاده میکنیم.


▪️درباره useEffect اینکه دو ارگیومنت داره
اولین ارگیومنت یک فانکشن هست که بعدا useEffect رو کال میکنه
و دومین یک dependency array هست که وظیفش تعیین کردن زمان های مختلفی هست که ما میخایم useEffect اجرا بشه، useEffect به صورت پیشفرض، بعد هر رندر اجرا میشه که برای جلوگیری از حالت پیشفرض ما از dependency array استفاده میکنیم.



▪️حالت های مختلف dependency array: []


1. در حالت اول useEffect در زمان mount و re-render شدن اجرا میشه
برای مثال وقتی یک props یا variable state رو داخل dependency array قرار میدیم، با هر تغییر در state یا props ریکت useEffect رو دوباره اجرا میکنه
به عبارتی ما useEffect رو با state و یا props همگام می کنیم

1. useEffect(function(){} , [list]);


2. حالت دوم، فقط در زمان mount اجرا میشه

2. useEffect(function(){} , [ ]);



3. زمانی که dependency array وجود نداشته باشه، useEffect با هر رندر اجرا میشه

3. useEffect(function(){});


@AlirezaJsTs

اینجوری میشه یه آرایه از stringها رو به number تبدیل کرد.

@AlirezaJsTs

کاربرد متد flat. استفادش برای وقتیه که نخوایم for تو در تو بزنیم و در نتیجه کد تمیزتری داریم.

@AlirezaJsTs

لوگوی جدید توییتر رسماً معرفی شد: حرف X به‌جای پرنده

🔹همانطور که ایلان ماسک وعده داده بود، از لوگوی جدید توییتر رونمایی شد. لوگوی جدید این شبکه اجتماعی از پرنده، به حرف انگلیسی X تغییر می‌کند. درحال‌حاضر تصویر پروفایل ایلان ماسک و همچنین خود توییتر، حرف X است و البته نام پروفایل توییتر هم به X تغییر کرده است./دیجیاتو

@AlirezaJsTs

اینجوری آخرین المنت یک آرایه رو بگیرید.

@AlirezaJsTs

دیدین تو یسری سایتا مثلا می‌نویسه مثلا 2 روز پیش؟ یا مثلا 2 هفته پیش؟

همچین حرکتایی با متد RelativeTimeFormat از Intl انجام میشن که تو ویدئو بطور مفصل گفته شده

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

@AlirezaJsTs

متد toLocalString برای تبدیل تاریخ استفاده میشه. حتی میشه فرمت فارسی هم ازش گرفت.
ولی یه چیز جالب که داره اینه که میشه یه عدد بهش بدین و سه رقم سه رقم براتون جدا میکنه 😅

@AlirezaJsTs

https://gitmoji.dev/

یه سایت راهنما برای ایموجی کامیت‌های گیت

یه استفاده خوب از promiseها بحث multi-promise هست. مثلا وقتی دوتا فانکشن تاثیری روی هم ندارن، بهتره همزمان باهم call بشن. اینجوری کاربر کمتر منتظر میمونه.

کلا کار کردن با promise ها خیلی واجبه و توی اکثر مصاحبه‌ها بهش اشاره میشه. تو پستای بعدی چنتاشو توضیح میدم.

@AlirezaJsTs

با این کد میتونید یه دکمه بسازید و با کلیک کردن روی اون از پایین صفحه به بالای صفحه برسید.

@AlirezaJsTs

با یک نگاه flex box رو یاد بگیرید

@AlirezaJsTs

این سایت خیلی خوبه.
https://overapi.com/

چیت شیت همه زبان‌ها رو داره. حتما یه جا save کنید.


@AlirezaJsTs