201 | created 
npx create-next-app@latest .
به به نکست هم که نصب شد
اینجا خبری از نصب دوباره نیستمستقیم جامپ میزنیم سراغ چالشهای واقعی Next.js در ابعاد Production
فردا یک قطعه کد میندازیم جلو و کالبد شکافیش میکنیم باهم ( از اون باگای سمی توی useEffect)
Status: Ready to Mount 🟢
به به نکست هم که نصب شد
اینجا خبری از نصب دوباره نیستمستقیم جامپ میزنیم سراغ چالشهای واقعی Next.js در ابعاد Production
فردا یک قطعه کد میندازیم جلو و کالبد شکافیش میکنیم باهم ( از اون باگای سمی توی useEffect)
Status: Ready to Mount 🟢
۲
چرا این کد توی Next.js (و کلا ریاکت) یک فاجعه ست؟ در حالی که Dependency Array هم درست ست شده واسش!
چرا این اتفاق میافته؟
۱. Reference Equality: در ریاکت، مقایسه ی وابستگیها (Dependencies) به صورت Shallow Compare انجام میشه، یعنی ریاکت چک نمیکنه که محتوای Object چیه، بلکه چک میکنه ببینه آدرسش توی حافظه (Memory Reference) عوض شده یا نه.
۲. Re-render Cycle(چرخه ری-رندر شدن): با هر بار رندر شدن این کامپوننت، خط مربوط به تعریف options دوباره اجرا میشه، چون این یک Object هست، یک فضای جدید در حافظه میگیره.
۳. The Loop (تکرار بینهایت): ۰ کامپوننت رندر میشه -> options جدید ساخته میشه. ۰ ریاکت میبینه آدرس options با رندر قبلی فرق داره -> useEffect رو اجرا میکنه. ۰ اگه داخل افکت setState داشته باشی -> کامپوننت دوباره رندر میشه و این چرخه تا بینهایت (یا کرش کردن مرورگر) ادامه پیدا میکنه.
راهحل چیه حالا: ۰ اگر مقدار ثابته: ببرش بیرون از بدنه کامپوننت. ۰ اگر به props وابسته هست: از useMemo استفاده کن تا Reference ثابت بمونه. ( در ریاکت نسخه 19 نیازی به استفاده از useMemo نیست، ریاکت خودش تا حد امکان این کار رو براتون انجام میده)
#NextJS_Inside#Bug_Hunter#React #Nextjs
چرا این اتفاق میافته؟۱. Reference Equality: در ریاکت، مقایسه ی وابستگیها (Dependencies) به صورت Shallow Compare انجام میشه، یعنی ریاکت چک نمیکنه که محتوای Object چیه، بلکه چک میکنه ببینه آدرسش توی حافظه (Memory Reference) عوض شده یا نه.
۲. Re-render Cycle(چرخه ری-رندر شدن): با هر بار رندر شدن این کامپوننت، خط مربوط به تعریف options دوباره اجرا میشه، چون این یک Object هست، یک فضای جدید در حافظه میگیره.
۳. The Loop (تکرار بینهایت): ۰ کامپوننت رندر میشه -> options جدید ساخته میشه. ۰ ریاکت میبینه آدرس options با رندر قبلی فرق داره -> useEffect رو اجرا میکنه. ۰ اگه داخل افکت setState داشته باشی -> کامپوننت دوباره رندر میشه و این چرخه تا بینهایت (یا کرش کردن مرورگر) ادامه پیدا میکنه.
راهحل چیه حالا: ۰ اگر مقدار ثابته: ببرش بیرون از بدنه کامپوننت. ۰ اگر به props وابسته هست: از useMemo استفاده کن تا Reference ثابت بمونه. ( در ریاکت نسخه 19 نیازی به استفاده از useMemo نیست، ریاکت خودش تا حد امکان این کار رو براتون انجام میده)#NextJS_Inside#Bug_Hunter
#React #Nextjs