問題一覧に戻る
中級高度なパターン
問題68: StrictMode

React.StrictModeを使用して、開発時に潜在的な問題を検出する方法を学びます。非推奨のAPI使用、副作用の検出、予期しないコンポーネントの動作などを警告します。開発ビルドでのみ動作し、コンポーネントを2回レンダリングして副作用を検出します。コード品質を向上させ、将来のReactアップデートに備えるための重要なツールです。

import React from 'react';

function App() {
  return (
    {/* StrictModeラッパー */}
    <React.>
      <div>
        {/* 警告検出 */}
        <Counter />
      </div>
    </React.>
  );
}

function Counter() {
  const [count, setCount] = React.useState(0);
  {/* 副作用（検出対象） */}
  console.log('Render:', count);
  
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

export default App;