Too many re-renders ترجمتها «إعادة رسم كثيرة جدًا»، ومعناها: جزء في صفحتك يغيّر حالته وهو يترسم، فينرسم من جديد، ويغيّرها مرة ثانية، بلا نهاية، لين يوقفه React بالقوة. والنتيجة غالبًا صفحة بيضاء كاملة.
الترجمة كلمة بكلمة
| الرسالة | الترجمة | إيش تعني |
|---|---|---|
Too many re-renders | إعادة رسم كثيرة جدًا | الجزء انرسم مرات أكثر من الحد |
React limits the number of renders to prevent an infinite loop | React يحدّ عدد مرات الرسم عشان يمنع حلقة لا نهائية | React وقف الحلقة بنفسه |
Maximum update depth exceeded | تجاوز الحد الأقصى لعمق التحديث | قريب منه، لكن الحلقة تصير بعد الرسم مو أثناءه |
Cannot update a component while rendering a different component | ما ينفع تحدّث مكوّن وأنت ترسم مكوّن ثاني | تحذير قريب: الابن يغيّر حالة الأب وهو يترسم |
«المكوّن» (component) يعني جزء في الصفحة، و«الحالة» (state) معلومة يحفظها، مثل القائمة مفتوحة ولا مسكّرة.
وين تشوفها، وليش ما تطلع بالعربي
تطلع في Console (اضغط F12)، وتحتها قائمة أسماء المكوّنات. رسائل React بالإنجليزي دايم، مهما كانت لغة جهازك.
مشكلتك ولا مشكلة الموقع؟
- إذا أنت زائر: المشكلة في الموقع، مو عندك. تحديث الصفحة أو تغيير المتصفح ما يفيد.
- إذا الموقع موقعك: أغلب الحالات سطر واحد:
onClick={setOpen(true)}بدلonClick={() => setOpen(true)}. الأول يفتح القائمة وأنت ترسم الزر، فتبدأ الدوامة. وممكن السطر الغلط في جزء ما يترسم إلا في حالة معيّنة، مثل سلة فيها منتجات أو شاشة جوال، فتجرّب الصفحة وتشتغل، وعميلك يشوفها بيضاء.
إيش تكتب لـ Lovable أو Bolt أو Cursor
بعض الأدوات توقف الدوامة بدل ما تلقى سببها: عدّاد، أو متغير «أول مرة»، أو try/catch حول الرسم. الخطأ يختفي والسبب باقي. انسخ الرسالة كاملة مع قائمة الأسماء تحتها، وانسخ هذا:
React shows "Too many re-renders" on <page>, and the page goes white.
Here is the full message and the component stack: <paste>.
First explain in one sentence which state update runs during render and why.
Then fix that line. No counters, no "first time" flags, no try/catch around rendering.إذا شرح السبب وما فهمته، هذي علامة إنه ما فهمه هو بعد.
الحل خطوة بخطوة
الأسباب الثانية، وكيف تلقى المكوّن بنفسك، والحل الصح، في درس Too many re-renders: ليش تطلع صفحة بيضاء في React؟. وإذا الحلقة بعد الرسم مو أثناءه، شوف Maximum update depth exceeded.
وإذا الصفحة البيضاء عند عملائك الحين، حل مشاكل تطبيقك يبدأ بتشخيص مكتوب قبل أي تعديل.