React StrictMode: باز کردن قفل یک محیط توسعه قدرتمند

React StrictMode ابزاری قدرتمند است که به توسعه‌دهندگان کمک می‌کند تا مشکلات بالقوه را در اپلیکیشن‌های ری‌اکت خود شناسایی کنند. با فعال کردن StrictMode، شما در واقع مجموعه‌ای از بررسی‌ها و هشدارهای اضافی را فعال می‌کنید که می‌توانند کیفیت و قابلیت نگهداری کد شما را بهبود بخشند. این فقط مربوط به گرفتن خطاها نیست؛ بلکه در مورد اجرای بهترین شیوه‌ها و آماده‌سازی اپلیکیشن شما برای به‌روزرسانی‌های آینده ری‌اکت است. StrictMode یک ویژگی فقط برای توسعه است، به این معنی که بر عملکرد اپلیکیشن تولیدی شما تأثیری نمی‌گذارد.

React StrictMode چیست؟

StrictMode یک حالت توسعه هدفمند در ری‌اکت است که مشکلات بالقوه در یک اپلیکیشن را برجسته می‌کند. این حالت بررسی‌ها و هشدارهای اضافی را برای فرزندان خود فعال می‌کند. این بررسی‌ها به شما کمک می‌کنند تا کامپوننت‌های بهتری بنویسید و از دام‌های رایج اجتناب کنید.

ویژگی‌های کلیدی StrictMode:

• شناسایی متدهای چرخه حیات ناامن: StrictMode در مورد استفاده از متدهای چرخه حیات قدیمی که مستعد ایجاد مشکل هستند، به‌ویژه در سناریوهای ناهمگام، هشدار می‌دهد.
• هشدار در مورد استفاده از APIهای منسوخ: StrictMode هرگونه API منسوخ شده‌ای را که ممکن است استفاده کنید برجسته می‌کند و شما را تشویق می‌کند تا به جایگزین‌های جدیدتر و پایدارتر مهاجرت کنید.
• تشخیص عوارض جانبی غیرمنتظره: کامپوننت‌های ری‌اکت در حالت ایده‌آل باید مانند توابع خالص رفتار کنند، به این معنی که نباید هیچ عارضه جانبی داشته باشند. StrictMode می‌تواند به شما در تشخیص عوارض جانبی ناخواسته‌ای که ممکن است بر وضعیت اپلیکیشن شما تأثیر بگذارد، کمک کند.
• اجرای قوانین سخت‌گیرانه‌تر برای Context API: StrictMode قوانین سخت‌گیرانه‌تری را برای استفاده از Context API ارائه می‌دهد و اطمینان حاصل می‌کند که شما از آن به درستی و به طور مؤثر استفاده می‌کنید.
• بررسی جهش‌های (mutations) غیرمنتظره: StrictMode می‌تواند به شما در شناسایی مواردی که به طور ناخواسته داده‌ها را مستقیماً تغییر می‌دهید، کمک کند که می‌تواند منجر به رفتار غیرقابل پیش‌بینی و مشکلاتی شود که دیباگ کردن آنها دشوار است.

چرا از React StrictMode استفاده کنیم؟

استفاده از React StrictMode چندین مزیت قابل توجه برای توسعه‌دهندگان دارد:

• بهبود کیفیت کد: StrictMode با اجرای بهترین شیوه‌ها و برجسته کردن مشکلات بالقوه در مراحل اولیه فرآیند توسعه، به شما کمک می‌کند تا کد تمیزتر و قابل نگهداری‌تری بنویسید.
• تشخیص زودهنگام خطا: با شناسایی مشکلات بالقوه در مراحل اولیه، StrictMode می‌تواند در زمان و تلاش شما برای دیباگ کردن در آینده صرفه‌جویی کند.
• آینده‌نگری اپلیکیشن شما: StrictMode با تشویق شما به مهاجرت از APIهای منسوخ و متدهای چرخه حیات ناامن، به شما کمک می‌کند تا اپلیکیشن خود را برای به‌روزرسانی‌های آینده ری‌اکت آماده کنید.
• افزایش عملکرد: در حالی که StrictMode مستقیماً عملکرد را بهبود نمی‌بخشد، می‌تواند به شما در شناسایی تنگناهای عملکرد ناشی از کد ناکارآمد یا عوارض جانبی غیرمنتظره کمک کند.
• درک بهتر اصول ری‌اکت: استفاده از StrictMode شما را وادار می‌کند تا با دقت بیشتری در مورد نحوه تعامل کامپوننت‌های خود با یکدیگر و با وضعیت کلی اپلیکیشن فکر کنید، که منجر به درک عمیق‌تری از اصول ری‌اکت می‌شود.

سناریویی را در نظر بگیرید که در آن یک تیم توسعه در چندین منطقه زمانی پخش شده است، با توسعه‌دهندگانی در لندن، توکیو و نیویورک. پیاده‌سازی StrictMode از همان ابتدا تضمین می‌کند که کد نوشته شده توسط یک توسعه‌دهنده با بهترین شیوه‌ها هماهنگ باشد و صرف‌نظر از موقعیت یا سطح تجربه توسعه‌دهنده، تضادهای بالقوه و تلاش‌های دیباگینگ را در مراحل بعدی چرخه توسعه کاهش دهد.

چگونه React StrictMode را فعال کنیم

فعال کردن StrictMode ساده است. شما می‌توانید هر بخشی از اپلیکیشن خود را در کامپوننت <React.StrictMode> بپیچید. این به شما امکان می‌دهد تا StrictMode را به طور انتخابی برای کامپوننت‌های خاص یا کل اپلیکیشن اعمال کنید.

فعال‌سازی StrictMode برای کل اپلیکیشن

برای فعال کردن StrictMode برای کل اپلیکیشن، کامپوننت ریشه را با <React.StrictMode> بپیچید:

            import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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

            

              
                Copy
              
            
          

فعال‌سازی StrictMode برای یک کامپوننت خاص

برای فعال کردن StrictMode برای یک کامپوننت خاص، آن کامپوننت را با <React.StrictMode> بپیچید:

            import React from 'react';

function MyComponent() {
  return (
    <React.StrictMode>
      <div>
        {/* Component content */}
      </div>
    </React.StrictMode>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

این کاربرد انتخابی به شما امکان می‌دهد تا بر روی مناطق خاصی از اپلیکیشن خود که مشکوک به مشکلات بالقوه هستند، تمرکز کنید. این به ویژه برای پایگاه‌های کد بزرگ یا هنگام مهاجرت کد قدیمی به ری‌اکت مفید است.

مشکلات رایجی که توسط StrictMode شناسایی می‌شوند

StrictMode به شناسایی مشکلات مختلف کمک می‌کند و کیفیت کلی اپلیکیشن‌های ری‌اکت شما را بهبود می‌بخشد. در اینجا برخی از مشکلات رایجی که StrictMode می‌تواند شناسایی کند آورده شده است:

متدهای چرخه حیات ناامن

برخی از متدهای چرخه حیات قدیمی ناامن تلقی می‌شوند و می‌توانند منجر به رفتار غیرمنتظره شوند، به‌ویژه در محیط‌های ناهمگام. StrictMode در مورد استفاده از متدهای زیر هشدار می‌دهد:

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

این متدها اغلب به اشتباه استفاده می‌شوند و منجر به باگ‌های بالقوه و مشکلات عملکردی می‌شوند. StrictMode توسعه‌دهندگان را تشویق می‌کند تا به جایگزین‌های امن‌تری مانند componentDidMount، getDerivedStateFromProps و shouldComponentUpdate مهاجرت کنند.

به عنوان مثال، یک اپلیکیشن تجارت الکترونیک را در نظر بگیرید که جزئیات محصول را در componentWillMount دریافت می‌کند. اگر فراخوانی API کند باشد، کامپوننت ممکن است در ابتدا با داده‌های ناقص رندر شود. StrictMode این موضوع را نشان می‌دهد و شما را وادار می‌کند تا از `componentDidMount` استفاده کنید تا اطمینان حاصل شود که واکشی داده‌ها پس از رندر اولیه انجام می‌شود و تجربه کاربری بهتری را فراهم می‌کند.

APIهای منسوخ

StrictMode در مورد استفاده از APIهای منسوخ ری‌اکت هشدار می‌دهد. APIهای منسوخ ویژگی‌هایی هستند که دیگر برای استفاده توصیه نمی‌شوند و ممکن است در نسخه‌های آینده ری‌اکت حذف شوند. استفاده از APIهای منسوخ می‌تواند منجر به مشکلات سازگاری و رفتار غیرمنتظره شود.

StrictMode به شما کمک می‌کند تا این APIهای منسوخ را شناسایی و با جایگزین‌های توصیه‌شده آنها جایگزین کنید و اطمینان حاصل کنید که اپلیکیشن شما با به‌روزرسانی‌های آینده ری‌اکت سازگار باقی می‌ماند.

یک مثال، استفاده از `findDOMNode` است که اکنون استفاده از آن توصیه نمی‌شود. StrictMode این موضوع را برجسته می‌کند و توسعه‌دهندگان را تشویق می‌کند تا به جای آن از refهای ری‌اکت استفاده کنند که منجر به رفتار قابل پیش‌بینی‌تر کامپوننت می‌شود.

عوارض جانبی غیرمنتظره

کامپوننت‌های ری‌اکت در حالت ایده‌آل باید مانند توابع خالص رفتار کنند، به این معنی که نباید هیچ عارضه جانبی داشته باشند. عوارض جانبی اقداماتی هستند که وضعیت را خارج از محدوده کامپوننت تغییر می‌دهند، مانند تغییر مستقیم DOM یا برقراری تماس‌های API در فرآیند رندرینگ.

StrictMode با فراخوانی دو بار برخی توابع به شما کمک می‌کند تا عوارض جانبی ناخواسته را تشخیص دهید. این تکرار، عوارض جانبی بالقوه‌ای را که ممکن است بلافاصله آشکار نباشند، نشان می‌دهد. اگر تابعی عوارض جانبی داشته باشد، فراخوانی دو بار آن احتمالاً نتایج متفاوتی تولید می‌کند و شما را از این مشکل آگاه می‌سازد.

به عنوان مثال، کامپوننتی که یک شمارنده سراسری را در حین رندرینگ به‌روز می‌کند، توسط StrictMode شناسایی می‌شود. فراخوانی دوگانه باعث می‌شود شمارنده دو بار افزایش یابد و عارضه جانبی آشکار شود. این شما را مجبور می‌کند تا به‌روزرسانی شمارنده را به یک متد چرخه حیات مناسب‌تر یا یک event handler منتقل کنید.

Legacy String Ref API

نسخه‌های قدیمی‌تر ری‌اکت از یک API مبتنی بر رشته برای refها پشتیبانی می‌کردند. این رویکرد اکنون قدیمی تلقی می‌شود و می‌تواند منجر به مشکلاتی شود، به‌ویژه در اپلیکیشن‌های پیچیده‌تر.

StrictMode در برابر استفاده از refهای رشته‌ای هشدار می‌دهد و توسعه‌دهندگان را تشویق می‌کند تا از callback ref مدرن‌تر و انعطاف‌پذیرتر یا API React.createRef استفاده کنند.

استفاده از callback ref (مثلاً `ref={el => this.inputElement = el}`) یا `React.createRef()` تضمین می‌کند که ref به درستی در هنگام mount و unmount شدن کامپوننت متصل و جدا می‌شود و از نشت حافظه بالقوه و رفتار غیرمنتظره جلوگیری می‌کند.

تشخیص استفاده ناامن از Context

Context API راهی برای به اشتراک گذاشتن داده‌ها بین کامپوننت‌ها بدون نیاز به پاس دادن دستی props در هر سطح فراهم می‌کند. با این حال، استفاده نادرست از Context API می‌تواند منجر به مشکلات عملکردی و رفتار غیرمنتظره شود.

StrictMode قوانین سخت‌گیرانه‌تری را برای استفاده از Context API اجرا می‌کند و به شما کمک می‌کند تا مشکلات بالقوه را زودتر شناسایی کنید. این شامل اطمینان از به‌روزرسانی صحیح مقادیر context و عدم رندر مجدد غیرضروری کامپوننت‌ها هنگام تغییر مقدار context است.

StrictMode همچنین در تشخیص موقعیت‌هایی که یک کامپوننت به مقادیر context که به درستی ارائه یا به‌روز نشده‌اند متکی است، کمک می‌کند. با شناسایی این مشکلات، StrictMode به شما کمک می‌کند تا اطمینان حاصل کنید که اپلیکیشن شما از Context API به درستی و به طور مؤثر استفاده می‌کند.

بهترین شیوه‌ها برای استفاده از React StrictMode

برای به حداکثر رساندن مزایای React StrictMode، این بهترین شیوه‌ها را در نظر بگیرید:

• StrictMode را زود فعال کنید: StrictMode را هر چه زودتر در جریان کار توسعه خود ادغام کنید. این به شما امکان می‌دهد تا مشکلات بالقوه را در مراحل اولیه فرآیند توسعه شناسایی کنید و رفع آنها را آسان‌تر و کم‌هزینه‌تر کنید.
• به هشدارها فوراً رسیدگی کنید: هشدارهای StrictMode را نادیده نگیرید. آنها را به عنوان شاخص‌های مهمی از مشکلات بالقوه در کد خود در نظر بگیرید. به هشدارها به سرعت رسیدگی کنید تا اطمینان حاصل شود که اپلیکیشن شما پایدار و قابل نگهداری باقی می‌ماند.
• از StrictMode به طور انتخابی استفاده کنید: لازم نیست StrictMode را برای کل اپلیکیشن به یکباره فعال کنید. با فعال کردن آن برای کامپوننت‌ها یا ماژول‌های خاصی که مشکوک به مشکل هستند، شروع کنید. به تدریج با رسیدگی به هشدارها و بازسازی کد خود، دامنه StrictMode را گسترش دهید.
• هشدارها را درک کنید: برای درک معنای هر هشدار StrictMode وقت بگذارید. فقط کورکورانه سعی نکنید هشدار را بدون درک مشکل اساسی برطرف کنید. درک علت اصلی هشدار به شما کمک می‌کند تا کد بهتری بنویسید و از مشکلات مشابه در آینده جلوگیری کنید.
• از ابزارهای توسعه‌دهنده استفاده کنید: از ابزارهای توسعه‌دهنده ری‌اکت (React Developer Tools) برای بازرسی کامپوننت‌های خود و شناسایی مشکلات بالقوه استفاده کنید. ابزارهای توسعه‌دهنده ری‌اکت بینش‌های ارزشمندی در مورد وضعیت، props و عملکرد اپلیکیشن شما ارائه می‌دهند.
• به طور کامل تست کنید: پس از فعال کردن StrictMode و رسیدگی به هرگونه هشدار، اپلیکیشن خود را به طور کامل تست کنید تا اطمینان حاصل شود که همه چیز همانطور که انتظار می‌رود کار می‌کند. تست‌های واحد و تست‌های یکپارچه‌سازی بنویسید تا تأیید کنید که کامپوننت‌های شما به درستی رفتار می‌کنند.

تیمی را در برلین در نظر بگیرید که روی یک ویژگی جدید برای اپلیکیشن خود کار می‌کند. آنها StrictMode را برای کامپوننت جدیدی که در حال توسعه آن هستند فعال می‌کنند. بلافاصله، StrictMode استفاده از یک API منسوخ برای مدیریت ارسال فرم را نشان می‌دهد. سپس تیم می‌تواند به سرعت کامپوننت را بازسازی کند تا از رویکرد توصیه‌شده استفاده کند و اطمینان حاصل کند که ویژگی جدید با استفاده از شیوه‌های مدرن ری‌اکت ساخته شده و از مشکلات بالقوه در آینده جلوگیری می‌کند. این فرآیند تکراری بهبود مستمر کیفیت کد را تضمین می‌کند.

StrictMode و عملکرد

درک این نکته بسیار مهم است که StrictMode صرفاً یک ابزار زمان توسعه است. این ابزار در حین توسعه برای انجام بررسی‌ها و هشدارهای خود سربار اضافه می‌کند، اما هیچ تأثیری بر عملکرد اپلیکیشن تولیدی شما ندارد. هنگامی که اپلیکیشن شما برای تولید ساخته می‌شود، StrictMode به طور خودکار غیرفعال می‌شود و بررسی‌های آن دیگر انجام نمی‌شود.

در حالی که StrictMode مستقیماً عملکرد را بهبود نمی‌بخشد، می‌تواند به طور غیرمستقیم با کمک به شما در شناسایی و رفع تنگناهای عملکرد ناشی از کد ناکارآمد یا عوارض جانبی غیرمنتظره، منجر به بهبود عملکرد شود. با تشویق شما به نوشتن کد تمیزتر و قابل نگهداری‌تر، StrictMode می‌تواند در بلندمدت به یک اپلیکیشن با عملکرد بهتر کمک کند.

شایان ذکر است که StrictMode به عمد برخی توابع (مانند سازنده‌های کامپوننت) را دو بار فراخوانی می‌کند تا عوارض جانبی را آشکار کند. در حالی که این می‌تواند بیلدهای توسعه را کند کند، اما این یک مصالحه ضروری برای مزایایی است که ارائه می‌دهد.

StrictMode و کتابخانه‌های شخص ثالث

بررسی‌ها و هشدارهای StrictMode برای همه فرزندان کامپوننت <React.StrictMode> اعمال می‌شود، از جمله کتابخانه‌های شخص ثالث. این بدان معناست که StrictMode به طور بالقوه می‌تواند مشکلاتی را در کد شخص ثالث که ممکن است از آن آگاه نباشید، نشان دهد.

در حالی که ممکن است نتوانید مستقیماً مشکلات موجود در کتابخانه‌های شخص ثالث را برطرف کنید، هشدارهای StrictMode هنوز هم می‌توانند ارزشمند باشند. آنها می‌توانند شما را از مشکلات سازگاری بالقوه یا APIهای منسوخ شده‌ای که کتابخانه از آنها استفاده می‌کند، آگاه کنند. این به شما امکان می‌دهد تا تصمیمات آگاهانه‌ای در مورد ادامه استفاده از کتابخانه یا یافتن یک جایگزین بگیرید.

در برخی موارد، ممکن است بتوانید هشدارهای StrictMode در کتابخانه‌های شخص ثالث را با پیچیدن کامپوننت‌های کتابخانه در یک کامپوننت جداگانه که StrictMode را برای آن زیردرخت خاص غیرفعال می‌کند، دور بزنید. با این حال، این کار باید با احتیاط انجام شود، زیرا می‌تواند مشکلات بالقوه‌ای را که ممکن است بر رفتار اپلیکیشن شما تأثیر بگذارد، پنهان کند.

مثال‌هایی از عملکرد StrictMode

بیایید به چند مثال مشخص از اینکه چگونه StrictMode می‌تواند به شما در بهبود کدتان کمک کند، نگاهی بیندازیم.

مثال ۱: شناسایی متدهای چرخه حیات ناامن

            import React, { Component } from 'react';

class MyComponent extends Component {
  componentWillMount() {
    // Fetch data or perform other side effects
    console.log('componentWillMount is running');
  }

  render() {
    return <div>My Component</div>;
  }
}

export default MyComponent;

            

              
                Copy
              
            
          

هنگامی که StrictMode فعال باشد، هشداری را در کنسول ثبت می‌کند که نشان می‌دهد componentWillMount منسوخ شده است و باید با componentDidMount جایگزین شود.

مثال ۲: تشخیص عوارض جانبی غیرمنتظره

            import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  // Side effect during rendering (bad practice!)
  setCount(count + 1);

  return <div>Count: {count}</div>;
}

export default MyComponent;

            

              
                Copy
              
            
          

StrictMode تابع کامپوننت را دو بار فراخوانی می‌کند و باعث می‌شود تابع setCount در هر رندر دو بار فراخوانی شود. این منجر به افزایش شمارنده به میزان دو به جای یک می‌شود و شما را از عارضه جانبی ناخواسته آگاه می‌کند.

مثال ۳: Legacy String Ref API

            import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <input type="text" ref="myInput" />;
  }

  componentDidMount() {
    // Access the input element using the string ref
    this.refs.myInput.focus();
  }
}

export default MyComponent;

            

              
                Copy
              
            
          

StrictMode هشداری را ثبت می‌کند که نشان می‌دهد refهای رشته‌ای منسوخ شده‌اند و باید با callback ref یا React.createRef جایگزین شوند.

StrictMode و Error Boundaries

StrictMode می‌تواند با Error Boundaries برای ارائه یک مکانیسم مدیریت خطای قوی کار کند. در حالی که StrictMode مشکلات بالقوه را تشخیص می‌دهد، Error Boundaries راهی برای مدیریت خطاهایی که در حین رندرینگ رخ می‌دهند، فراهم می‌کنند. Error boundaries کامپوننت‌های ری‌اکت هستند که خطاهای جاوااسکریپت را در هر جای درخت کامپوننت فرزند خود می‌گیرند، آن خطاها را ثبت می‌کنند و به جای خراب کردن کل درخت کامپوننت، یک UI جایگزین نمایش می‌دهند.

با پیچیدن اپلیکیشن خود در هر دو StrictMode و Error Boundaries، می‌توانید اطمینان حاصل کنید که مشکلات بالقوه زودتر تشخیص داده می‌شوند و خطاها به خوبی مدیریت می‌شوند و تجربه کاربری بهتری را فراهم می‌کنند.

جایگزین‌های StrictMode

در حالی که StrictMode ابزار قدرتمندی است، رویکردهای جایگزینی برای بهبود کیفیت و قابلیت نگهداری کد ری‌اکت شما وجود دارد. اینها شامل موارد زیر است:

• لینترها: لینترهایی مانند ESLint می‌توانند به شما در اجرای استانداردهای کدنویسی و شناسایی مشکلات بالقوه در کدتان کمک کنند. لینترها می‌توانند برای بررسی طیف گسترده‌ای از مشکلات، از جمله خطاهای نحوی، متغیرهای استفاده نشده و آسیب‌پذیری‌های امنیتی بالقوه پیکربندی شوند.
• بررسی‌کننده‌های نوع (Type Checkers): بررسی‌کننده‌های نوع مانند TypeScript می‌توانند به شما در شناسایی خطاهای نوع در مراحل اولیه فرآیند توسعه کمک کنند. بررسی‌کننده‌های نوع می‌توانند اطمینان حاصل کنند که کد شما از نظر نوع امن است و خطر خطاهای زمان اجرا را کاهش می‌دهند.
• تست‌های واحد: نوشتن تست‌های واحد می‌تواند به شما در تأیید اینکه کامپوننت‌های شما به درستی رفتار می‌کنند، کمک کند. تست‌های واحد می‌توانند به شما در شناسایی باگ‌ها و رگرسیون‌ها در مراحل اولیه فرآیند توسعه کمک کنند.
• بازبینی کد (Code Reviews): انجام بازبینی کد می‌تواند به شما در شناسایی مشکلات بالقوه و اطمینان از اینکه کد شما با استانداردهای کدنویسی مطابقت دارد، کمک کند. بازبینی کد همچنین می‌تواند به شما در به اشتراک گذاشتن دانش و بهترین شیوه‌ها در تیم خود کمک کند.

این جایگزین‌ها مکمل StrictMode هستند و می‌توانند در کنار آن برای ارائه یک رویکرد جامع به کیفیت کد استفاده شوند.

نتیجه‌گیری

React StrictMode ابزاری ارزشمند برای بهبود کیفیت و قابلیت نگهداری اپلیکیشن‌های ری‌اکت شما است. با فعال کردن StrictMode، می‌توانید مشکلات بالقوه را در مراحل اولیه فرآیند توسعه شناسایی کنید، بهترین شیوه‌ها را اجرا کنید و اپلیکیشن خود را برای به‌روزرسانی‌های آینده ری‌اکت آماده کنید. در حالی که این یک ویژگی فقط برای توسعه است، مزایایی که ارائه می‌دهد می‌تواند به طور قابل توجهی سلامت و پایداری بلندمدت پایگاه کد شما را بهبود بخشد.

چه یک توسعه‌دهنده باتجربه ری‌اکت باشید و چه تازه شروع کرده‌اید، گنجاندن StrictMode در جریان کار توسعه خود یک حرکت هوشمندانه است. این یک سرمایه‌گذاری کوچک است که می‌تواند بازده قابل توجهی از نظر کیفیت کد، کاهش زمان دیباگینگ و بهبود عملکرد اپلیکیشن داشته باشد. بنابراین، StrictMode را بپذیرید و یک محیط توسعه ری‌اکت قوی‌تر و قابل اعتمادتر را باز کنید.