اگر نمیخواید از کتابخانههای آماده برای debounce استفاده کنید ، با همین کدی که توی تصویر میبینید ، میتونید پیادهسازیش کنید. یکیش برای فانکشن کامپوننتهای ریکته ، یکیش برای کلاس کامپوننتها.
اگر هم از چیزی جز ریکت استفاده میکنید ، میتونید همین کانسپت رو ببرید توی اون محیط با توجه به ویژگیهای خودش پیادهسازی کنید چون در نهایت این کار ، جاوا اسکریپتی داره اتفاق میافته.
توضیح debounce:
فرض کن سرچ اینپوتی دارید که به ازای کلمهای که وارد میکنید یکبار سرویس متناظرش رو کال میکنه. اگر قرار باشه به ازای تایپ هر حرف یکبار سرویس کال اتفاق بیفته فشار زیادی به مرورگر میاره و یوزر کندی احساس میکنه. برای همین میان با استفاده از مفهومی به نام debounce یک تاخیر مثلا ۵۰۰ میلی ثانیهای میذارن که اگر از آخرین کاراکتری که کاربر تایپ کرده بود ۵۰۰ میلی ثانیه گذشت ، سرویس کال بشه.
@alithecodeguy #debounce #js #react
اگر هم از چیزی جز ریکت استفاده میکنید ، میتونید همین کانسپت رو ببرید توی اون محیط با توجه به ویژگیهای خودش پیادهسازی کنید چون در نهایت این کار ، جاوا اسکریپتی داره اتفاق میافته.
توضیح debounce:
فرض کن سرچ اینپوتی دارید که به ازای کلمهای که وارد میکنید یکبار سرویس متناظرش رو کال میکنه. اگر قرار باشه به ازای تایپ هر حرف یکبار سرویس کال اتفاق بیفته فشار زیادی به مرورگر میاره و یوزر کندی احساس میکنه. برای همین میان با استفاده از مفهومی به نام debounce یک تاخیر مثلا ۵۰۰ میلی ثانیهای میذارن که اگر از آخرین کاراکتری که کاربر تایپ کرده بود ۵۰۰ میلی ثانیه گذشت ، سرویس کال بشه.
@alithecodeguy #debounce #js #react
در جاوا اسکریپت ، وقتی دارید از fetch استفاده میکنید ، یادتون نره از AbortController استفاده کنید.
تصویر از کدای ریکته. برای باقی کتابخانه و فریمورکها هم مفهوم کلی همینه.
#js #react #fetch @alithecodeguy
تصویر از کدای ریکته. برای باقی کتابخانه و فریمورکها هم مفهوم کلی همینه.
#js #react #fetch @alithecodeguy
تمام لایفسایکلهای ریکت در یک نگاه.
اگر ریکت کار میکنید پیشنهاد میکنم به این یه سایت حتما یه سر بزنید. روی بخشهای مختلفش هم میشه کلیک کرد.
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
توضیحات همراه با مثال هم اینجا میتونید پیدا کنید:
https://www.w3schools.com/react/react_class.asp
#react #webprogramming #js @alithecodeguy
اگر ریکت کار میکنید پیشنهاد میکنم به این یه سایت حتما یه سر بزنید. روی بخشهای مختلفش هم میشه کلیک کرد.
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
توضیحات همراه با مثال هم اینجا میتونید پیدا کنید:
https://www.w3schools.com/react/react_class.asp
#react #webprogramming #js @alithecodeguy
سوال مصاحبهای ریکت:
یک کامپوننت در چه شرایطی ریرندر میشه؟
جوابش ساده به نظر میاد ولی قبل از جواب دادن ، بیشتر بهش فکر کنید.
#react #interview #js @alithecodeguy
یک کامپوننت در چه شرایطی ریرندر میشه؟
جوابش ساده به نظر میاد ولی قبل از جواب دادن ، بیشتر بهش فکر کنید.
#react #interview #js @alithecodeguy
میدونیم که استیت آپدیتها توی ریکت آسینک هستن. یعنی نمیتونیم مطمن باشیم که چه زمانی انجام میشن. به عبارت دیگه اگر دو خط کد بزنید که یکیش استیت آپدیت باشه نمیتونید مطمن بشید که کدوم خط اول انجام میشه.
اگر میخواید که این موضوع رو هندل کنید و فرآیند اجرای کد رو منتظر نگه دارید تا استیت آپدیت مدنظرتون تموم بشه میتونید از
flushSync
استفاده کنید.
نکته : چیزی نیست که بخواید در حالت معمول استفاده کنید و تا جایی که میشه ازش استفاده نکنید.
#tip #react #js @alithecodeguy
اگر میخواید که این موضوع رو هندل کنید و فرآیند اجرای کد رو منتظر نگه دارید تا استیت آپدیت مدنظرتون تموم بشه میتونید از
flushSync
استفاده کنید.
نکته : چیزی نیست که بخواید در حالت معمول استفاده کنید و تا جایی که میشه ازش استفاده نکنید.
#tip #react #js @alithecodeguy
اگر از react-router استفاده میکنید ، الزامی وجود نداره که حتما از کانتکست خود ریکت استفاده کنید.
میتونید از کانتکست ریکت روتر استفاده کنید.
لینک:
https://reactrouter.com/en/main/hooks/use-outlet-context
#react #tip @alithecodeguy
میتونید از کانتکست ریکت روتر استفاده کنید.
لینک:
https://reactrouter.com/en/main/hooks/use-outlet-context
#react #tip @alithecodeguy
توی این ویدیو با هم میبینیم با استفاده از ویژگیهای خود swr چطوری میشه سرویس کالها رو طوری نوشت که دیتاهاشونو بتونیم توی همدیگه استفاده کنیم بدون اینکه خطا بخوریم.
#react #nextjs #swr
@alithecodeguy
https://youtu.be/rYt-S_iGuFI?si=Vu5R1TtrJgoXZiKG
#react #nextjs #swr
@alithecodeguy
https://youtu.be/rYt-S_iGuFI?si=Vu5R1TtrJgoXZiKG
YouTube
اجرای ترتیبی سرویسکالها با SWR
در این ویدیو میبینیم که چه جوری میشه سرویسهایی که به دیتای همدیگه نیاز دارن تا کال بشن رو به هم متصل کنیم تا همشون درست درست کال بشن.
مطالب بیشتر در کانال رقصنده با کد :
https://t.iss.one/alithecodeguy
مطالب بیشتر در کانال رقصنده با کد :
https://t.iss.one/alithecodeguy
همچنان معتقدم که ریداکس با اختلاف زیادی از بقیه استیت منیجرها بهتره که بخشی از این مزیتش به خاطر ابزارهای جانبیشه از جمله آرتیکی-کویری.
ولی اگر فقط به چشم استیت منیجر بخوایم بهش نگاه کنیم ، توی یک سناریوی خاص (که کم ممکنه براتون پیش بیاد) از زوستند (یا هر تلفط دیگهای که ازش میگن) کم میاره و اون وقتیه که دیتاهاتون مرتبا و احتمالا سرعت بالایی آپدیت میشه. مثلا وقتی که یک جدول کارگزاری ایجاد میکنید ممکنه توی یک ثانیه تا دهها آپدیت دریافت کنید. عملا ریداکس شدید کم میاره و فریز میشه چند ثانیه (اگر نخواید دستی تغییرش بدید یا خود جدولی که استفاده میکنید آپشنشو نداشته باشه) ولی همونجور که توی داکیومنتهای زوستند مشاهده میکنید ، راه حل این موضوع وجود داره.
لینک:
https://lnkd.in/dU6T2ehe
#zustand #redux #react #js #programming
ولی اگر فقط به چشم استیت منیجر بخوایم بهش نگاه کنیم ، توی یک سناریوی خاص (که کم ممکنه براتون پیش بیاد) از زوستند (یا هر تلفط دیگهای که ازش میگن) کم میاره و اون وقتیه که دیتاهاتون مرتبا و احتمالا سرعت بالایی آپدیت میشه. مثلا وقتی که یک جدول کارگزاری ایجاد میکنید ممکنه توی یک ثانیه تا دهها آپدیت دریافت کنید. عملا ریداکس شدید کم میاره و فریز میشه چند ثانیه (اگر نخواید دستی تغییرش بدید یا خود جدولی که استفاده میکنید آپشنشو نداشته باشه) ولی همونجور که توی داکیومنتهای زوستند مشاهده میکنید ، راه حل این موضوع وجود داره.
لینک:
https://lnkd.in/dU6T2ehe
#zustand #redux #react #js #programming
احتمالا شما هم برای نمایش نوتیفیکیشن از react-toastify استفاده میکنید و احتمالا دیدید که نوتیف تکراری چه قدر روی مخه.
دو تا راه داره که این موضوع رو هندل کنید. یکیش با ref که در واقع دارید لقمه رو دور سرتون میچرخونید ، یکی دیگه با استفاده از toastId که خیلی ساده این کار رو انجام میده. فقط کافیه با توجه به دیتای خاصی که دارید هندلش میکنید ، یه آیدی منحصر به فرد قرار بدید:
toast("I cannot be duplicated!", {
toastId: customId
});
#react #js #tip #react_toastify
دو تا راه داره که این موضوع رو هندل کنید. یکیش با ref که در واقع دارید لقمه رو دور سرتون میچرخونید ، یکی دیگه با استفاده از toastId که خیلی ساده این کار رو انجام میده. فقط کافیه با توجه به دیتای خاصی که دارید هندلش میکنید ، یه آیدی منحصر به فرد قرار بدید:
toast("I cannot be duplicated!", {
toastId: customId
});
#react #js #tip #react_toastify
دوره مقدماتی و یک روزه ریکت
اطلاعات بیشتر در تصویر
(دوره نکست جیاس مقدماتی ، بعد از این دوره تشکیل خواهد شد)
آدرس کانال رقصنده با کد:
https://t.iss.one/+6qj3zj0u8bw5M2I0
#react #js #nextjs #programming #course #free
اطلاعات بیشتر در تصویر
(دوره نکست جیاس مقدماتی ، بعد از این دوره تشکیل خواهد شد)
آدرس کانال رقصنده با کد:
https://t.iss.one/+6qj3zj0u8bw5M2I0
#react #js #nextjs #programming #course #free
ریکت داره کامپایلر خودش رو میده و خیلی چیزایی که دستی انجام میشده و معمولا به عنوان نقطه ضعف ریکت میشناسن رو قراره اتومات انجام بده.
و این یعنی چرخه زندگی ریکت به دو قسمت قبل از کامپایلر اختصاصی و بعد از اون تقسیم میشه.
پیشنهاد میکنم لینک زیر رو از وبلاگ خودش بخونید:
https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024
#react
و این یعنی چرخه زندگی ریکت به دو قسمت قبل از کامپایلر اختصاصی و بعد از اون تقسیم میشه.
پیشنهاد میکنم لینک زیر رو از وبلاگ خودش بخونید:
https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024
#react
متوجه نکته جالبی توی ریکت شدم.
البته شاید قبلا بوده ولی الآن بهش توجه کردم.
اینکه عملا لینتر جزیی از ریکت شده و حتی داخل داکیومنتهای خودش هم مستقیما از لینتر حرف زده و براش مهمه که حتما طبق رولهای اون رفتار کنیم.
خلاصه که اگر تا حالا از لینتر فرار میکردید... دیگه راه فراری نیست 😁
پاورقی: خود کتابخانه ریکت چیزی به اسم لینتر نداره و اینها ابزارهای جانبیان. ولی ابزاری که ریکت خودش رو بهش وابسته میبینه و اون قدری مهم بوده که توی داکیومنتش بگه لینتر رو فعال کنید (یا بذارید فعال بمونه) ، بهش گوش کنید و به هوکهایی مثل
useEffectEvent
اشاره کنه.
#react
البته شاید قبلا بوده ولی الآن بهش توجه کردم.
اینکه عملا لینتر جزیی از ریکت شده و حتی داخل داکیومنتهای خودش هم مستقیما از لینتر حرف زده و براش مهمه که حتما طبق رولهای اون رفتار کنیم.
خلاصه که اگر تا حالا از لینتر فرار میکردید... دیگه راه فراری نیست 😁
پاورقی: خود کتابخانه ریکت چیزی به اسم لینتر نداره و اینها ابزارهای جانبیان. ولی ابزاری که ریکت خودش رو بهش وابسته میبینه و اون قدری مهم بوده که توی داکیومنتش بگه لینتر رو فعال کنید (یا بذارید فعال بمونه) ، بهش گوش کنید و به هوکهایی مثل
useEffectEvent
اشاره کنه.
#react
هوک
useEffectEvent
رو دریابید.
برای وقتایی که هم میخواید لینتر رو راضی نگه دارید ، هم میخواید
useEffect
که استفاده کردید نسبت به مقادیر
reactive
واکنش نشون نده. فرقی نداره این مقدار یک استیت باشه یا یک پروپ یا حتی یک کالبک.
پاورقی: خودم تا الآن راه غلط رو انجام میدادم.
#react
useEffectEvent
رو دریابید.
برای وقتایی که هم میخواید لینتر رو راضی نگه دارید ، هم میخواید
useEffect
که استفاده کردید نسبت به مقادیر
reactive
واکنش نشون نده. فرقی نداره این مقدار یک استیت باشه یا یک پروپ یا حتی یک کالبک.
پاورقی: خودم تا الآن راه غلط رو انجام میدادم.
#react
توی فارسی برای تبلت ، کلمه رایانک مالشی رو انتخاب کردن. با همین فرمون ، این هم میشه دکمه مالشی برای ریکت 😁
فقط برای ایده گرفتن گذاشتمش. به سلیقه خودتون تغییرش بدید.
سورس روی گیتهاب:
https://github.com/alithecodeguy/react_swipe_button
مطالب بیشتر در کانال رقصنده با مد:
https://t.iss.one/+6qj3zj0u8bw5M2I0
#react #programming #css
فقط برای ایده گرفتن گذاشتمش. به سلیقه خودتون تغییرش بدید.
سورس روی گیتهاب:
https://github.com/alithecodeguy/react_swipe_button
مطالب بیشتر در کانال رقصنده با مد:
https://t.iss.one/+6qj3zj0u8bw5M2I0
#react #programming #css
اگر حوصلتون شد، این دو تا لینک رو بخونید.
به زبان ساده توضیح میده immutablity چیه و چرا برای ریکت و ریداکس مهمه.
https://daveceddia.com/why-not-modify-react-state-directly/
https://daveceddia.com/react-redux-immutability-guide/#react-prefers-immutability
#redux #react
به زبان ساده توضیح میده immutablity چیه و چرا برای ریکت و ریداکس مهمه.
https://daveceddia.com/why-not-modify-react-state-directly/
https://daveceddia.com/react-redux-immutability-guide/#react-prefers-immutability
#redux #react
یکی از سوالات ساده ریکت که توی مصاحبهها میپرسن و باوجود بلد بودن ممکنه یادمون نیاد این هستش:
Three JSX rules:
1. Return a single root element
2. Close all the tags
3. CamelCase most of the things! (actually not every thing!)
#react #interview
Three JSX rules:
1. Return a single root element
2. Close all the tags
3. CamelCase most of the things! (actually not every thing!)
#react #interview
Boilerplate project :
NextJs + ReduxToolkit + RTK + Commitizen + Lint-staged , Prettier + Tailwind + TypeScript
https://github.com/alithecodeguy/boilerplate
امیدوارم مفید باشه.
#react #js #ts #nextjs
NextJs + ReduxToolkit + RTK + Commitizen + Lint-staged , Prettier + Tailwind + TypeScript
https://github.com/alithecodeguy/boilerplate
امیدوارم مفید باشه.
#react #js #ts #nextjs
GitHub
GitHub - alithecodeguy/boilerplate
Contribute to alithecodeguy/boilerplate development by creating an account on GitHub.