ما هو React.StrictMod؟

مرحباً بك : 

• strictMode: هي أداة لتتبع الأخطاء عن طريق إضافة بعض الفحوصات الإضافية الخاصة بها لمكون معين وأبناءه ومثلها مثل ال Fragment لا تؤثر على ال UI فقط تتبع الأخطاء 

  import React from 'react';
  
  function ExampleApplication() {
    return (
      <div>
        <Header />
        <React.StrictMode>
          <div>
            <ComponentOne />
            <ComponentTwo />
          </div>
        </React.StrictMode>
        <Footer />
      </div>
    );
  }

  في المثال السابق لن يتم عمل فحوصات إضافية  ل ( Header - Footer ) أما ال ComponentOne - ComponentTwo ومحتوياتهم سيتم فحصهم 

• مثال لما يتم فحصه: 
   1. التأكد من عدم استخدام ال ( UNSAFE_life cycly hooks ) مثل ( UNSAFE_componentWillReceiveProps - UNSAFE_componentWillMount - UNSAFE_componentWillUpdate ) 
   2. التأكد من عدم استخدام string ref
  3. التأكد من عدم استخدام عناصر منتهية مثل ( findDOMNode )
  4. التأكد من عدم استخدام old context API

• هذه التحذيرات فقط تظهر  آثناء التطوير ( development ) وليس ال production

StrictMode هي ميزة تمت إضافتها في الإصدار 16.3 وتهدف إلى مساعدتنا في العثور على المشكلات المحتملة في أحد التطبيقات.

كيفية أستعمال ميزة StricMode في تطبيق React :

كل ما عليك فعله لتفعيل StrictMode (من الإصدار 16.3) هو لف  المكون الذي تريده في تطبيقك بـ <React.StrictMode>.
فيما يلي مثال على إضافة  StrictMode  إلى مكون (component) :

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

بعد القيام بذلك مباشرة ، ستتمكن من رؤية التحذيرات في وحدة تحكم أدوات المطور. وهذا سبب ظهور التنبيه في console الخاص بك