React.StrictMode คืออะไร? มาทำความรู้จักกัน

จะเห็นว่าช่วงหลังๆ React มีการเพิ่ม Component ใหม่เข้ามาในโปรเจค โดยเฉพาะคนที่ใช้ createi-react-app ในการสร้างโปรเจค จะเห็นเลยว่าในไฟล์ index.js มีการเพิ่ม Component ประหลาดเข้ามาชื่อ <React.StrictMode>

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

มันมีความสำคัญยังไง? ทำไมถึงเอามาครอบตั้งแต่ App Component?

มาทำความเข้าใจกับมันกันครับ

คุณครูมาตรวจแล้ว!

หน้าที่หลักของ <React.StrictMode> คือการช่วยเราตรวจสอบการใช้งาน React ที่ไม่เหมาะสมครับ คล้ายๆ กับคุณครูฝ่ายปกครองมาเดินตรวจความเรียบร้อยของพวกเรานี่แหละ

และเพื่อตรวจจับวิธีการเขียนโค้ดใน React แบบเก่าบางตัวที่ไม่เหมาะสม และแนะนำการปรับโค้ดเป็นแบบใหม่เพื่อรองรับการมาถึงของกลไกการทำงานของ React ในอนาคตอันใกล้ โดยมีการแจ้งเตือนเป็น Warning หรือ Error ขณะรันใช้งาน

React.StrictMode เป็นตัวตรวจสอบการใช้งาน code ของเราว่าเหมาะสมหรือไม่ และให้คำแนะนำ แถมทำงานเฉพาะในโหมดพัฒนา (Development Mode) และไม่ทำงานใน Production จ้า

โดยหน้าที่หลักในปัจจุบันของ <React.StrictMode> มีดังนี้

ตรวจจับการใช้งาน Context API แบบเก่า และให้คำแนะนำในการแก้ไข (ดูการใช้งาน Context API แบบใหม่ที่นี่)

ตรวจจับผลของ Side-effect ที่ไม่เหมาะสมจากการเขียนใช้งาน Lifecycle Method

แจ้งเตือน หากตรวจจับการใช้งาน findDOMNode ที่กำลังจะปลดระวางการใช้งาน และให้คำแนะนำในการแก้ไข

แจ้งเตือน หากตรวจจับการใช้งาน String Ref API แบบเก่า และให้คำแนะนำในการแก้ไข (ดูการใช้งาน createRef API แทนที่นี่)

ตรวจจับการใช้งาน Lifecycle ที่ไม่เหมาะสม

วิธีใช้ React.StrictMode

ดังนั้นหากต้องการตรวจสอบการทำงานของโค้ดเรา เพื่อปรับปรุงให้ทันสมัยขึ้น เราก็ใส่ React.StrictMode ในครอบ Component ที่เราต้องการได้ เช่น

 <React.StrictMode>
    <NextflowComponent />
  </React.StrictMode>,

หรือถ้าเกิดเราสร้างโปรเจคใหม่โดยใช้ create-react-app มันก็จะใส่มาที่ตั้งแต่ ReactDOM.render() ในไฟล์ index.js เลย

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ติดตามเทคนิคดีๆ แบบนี้ ได้ทางช่องทางด้านล่าง และดูคอร์สเรียนโปรแกรมที่น่าสนใจได้เลยจ้า

• ติดตามจากแฟนเพจ Nextflow
• กดติดตามคลิปใหม่ๆ  Subscribe YouTube Channel ของพลได้เลย
• โทรติดต่อบริการจัดอบรม 083-071-3373 คลิกโทรผ่านมือถือได้เลย
• สอบถามผ่านทาง LINE คลิก
• สอบถามผ่านทาง Facebook คลิก

อ้างอิง – React Documentation