ما هو الـ StrictMode وما هي الفحوصات والتدقيقات التي يجريها في بيئة التطوير؟

الإجابة المختصرة

الـ StrictMode هو أداة تساعد المطورين على رصد الممارسات القديمة والمشاكل الخفية في الكود، حيث يقوم بإعادة تصيير المكونات وإعادة تشغيل الـ Effects مرتين في بيئة التطوير.

الشرح

لا ينتج StrictMode أي واجهة مرئية في الـ DOM. في بيئة التطوير فقط، يقوم بتشغيل الـ render مرتين لاكتشاف الدوال غير النقية (Impure Functions)، وتشغيل Setup والـ Cleanup في useEffect مرتين للتأكد من التخلص من الاشتراكات وتسريبات الذاكرة، بالإضافة للتحذير من استخدام دوال دورة الحياة المهجورة أو findDOMNode.

مثال بالكود

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root')!);
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

أخطاء شائعة

• الاعتقاد بأن استدعاء useEffect مرتين هو خطأ في ريأكت ومحاولة تعطيل StrictMode بدلاً من كتابة دالة cleanup سليمة.

أسئلة متابعة

• ما هو مفهوم الـ Pure Components و Purity في دوال ريأكت (Pure Functions)؟

المصادر

• React docs — StrictMode