بررسی خطای Maximum update depth exceeded در React

شاید برای شما پیش آمده باشه زمان کدنویسی با React به این خطای معروف بر بخورید و با توجه به شفاف بودن ترجمه این خطا باز متوجه نشید که کجای کار ایراد داشتید.

زمانیکه یک Loop بی نهایت در برنامه ایجاد میشه و داخل اون حلقه مداوم داره API مورد نظر یعنی setState اجرا میشه برنامه این خطا رو به شما نمایش میده ! البته این شکل و ظاهر در خطا برای کسانیکه مثلا از پکیج CRA یا همون create-react-app استفاده می کنند بیشتر مشهود هستش ...

به یک مثال توجه کنید :

<button on click={this.submit(setFieldValue)}>Submit</button>

در این مثال قراره زمان کلیک روی این button یک فرم submit بشه که مثلا اینجا با Formik کار کردیم و قراره بصورت reference متد setFieldValue رو هم به متد submit ارسال کنید که یک عملیات هایی رو انجام بده. و البته داخل متد submit کامپوننت setState رو هم دارید که یکسری state رو مقداردهی کنید ...

نتیجه : این کد اشتباه هستش و الان هست که خطای معروف Maximum update depth exceeded رو بگیرید و برنامه اجرا نشه !

همانطوریکه در جریان هستید , زمانیکه Event هارو در React فراخوانی می کنیم اگر بصورت صرفا یک نام متد باشه باید خیلی ساده بنویسید که this.methodName و خودش بصورت reference در نظر میگیره و یکبار بنا به نیاز اجرا میشه. ولی اگر قراره بهش بصورت Argument ورودی بدیم (شبیه دکمه بالا) اینجوری دیگه نمی نویسیم و باید در داخل مثلا یک Arrow function پوشیده یا wrapped بشه , چون اگر اینکار رو نکنیم یک حلقه بی نهایت اجرا میشه و می خواد تابع که حالا با داشتن دو پرانتز بصورت اجرا شونده هستش رو مدام اجرا کنه و render تو کامپوننت داشته باشید که میشه یک حلقه بی نهایت و خطای معروف رو ببینید ...

حالا برای رفع این مشکل اینجوری بنویسید :

<button on click={(e) => this.submit(e, setFieldValue)}>Submit</button>

من در کد بالا داخل یک Arrow function متد رو بصورت رفرنس ارسال کردم و البته e یا همون المان رو هم در اولین آرگومان فرستادم که اگر نیاز بود داخل متد submit ازش استفاده کنید. البته اگرم نیازی ندارید می تونید e رو بهش پاس ندید ...

توجه : متاسفانه بعلت باگی که سایت ویرگول در نمایش کدها داره , مجبور شدم در کدهای بالا بجای بصورت سرهمی جدا بنویسم !

نتیجه گیری

پس این خطا در حالت های مختلفی رخ میده که یکی از متداول ترین ها که اکثر برنامه نویس های React بهش بر میخورن همین اشتباه نوشتن Event ها رو دکمه یا متدهای مربوطه هستش. این خطا حتی در componentDidMount هم میتونه رخ بده و زمانیکه تابع return های بصورت recursive اشتباه داشته باشه مشهود هستش.

موفق باشید