【React 學習筆記 EP.26】StrictMode

什麼是 StrictMode？

StrictMode 是 React 內建的開發檢查工具，用來提醒可能有問題的寫法。它只會在開發環境進行檢查，不會影響到正式環境，但能幫你找出容易出錯的地方。

StrictMode 概念

1. 開發模式：StrictMode 只在開發時提供額外檢查，不會影響正式環境。
2. 不會顯示畫面：它只是包住元件，不會額外產生可見的 UI 或新的 DOM。
3. 提早發現問題：例如缺少 cleanup 的 Effect 或已棄用的 API。

StrictMode 語法

1. <StrictMode>：開啟嚴格檢查。
2. <App />：被檢查的元件範圍。
3. createRoot(...).render(...)：將 React 畫面掛載到頁面。
4. </StrictMode>：結束檢查範圍。

StrictMode 常見錯誤

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

function App() {
  return <h1>Hello React</h1>; // 要被檢查的畫面
}

createRoot(document.getElementById("root")).render(
  <StrictMode> {/* 開啟開發檢查 */}
    <App /> {/* 被包住的元件會接受檢查 */}
  </StrictMode>
);