0Pricing
React Academy · レッスン

Pure Componentsとrenderでの副作用回避

ミューテーションや外部からの読み取りを行わないrender関数を書きます

「Pure Componentsとrenderでの副作用回避」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、React における純粋なコンポーネントの意味、レンダリング関数に副作用があってはならない理由、よくある純粋性の違反を見つけて修正する方法を学びます。

純粋関数とは

純粋関数は、同じ入力に対して常に同じ出力を返し、観測可能な副作用を起こしません。React はコンポーネント関数が純粋であることを期待します。同じ props と state が与えられた場合、常に同じ JSX を返す必要があります。

React で純粋性が重要な理由

React はコンポーネントを複数回呼び出すことがあります（StrictMode、並行機能、サーバーレンダリングなど）。レンダリングに API 呼び出し、DOM の変更、グローバル変数への書き込みなどの副作用があると、それらが予測できない形で複数回実行されます。

よくある不純性：外部の state の変更

レンダリング中にコンポーネントの外部で定義された変数を変更してはいけません。イベントハンドラーや useEffect の中で変更するのは問題ありませんが、レンダリング時に変更してはいけません。
let totalRenders = 0; // external
function Counter() {
  totalRenders++; // BAD: side effect in render
  return <p>{totalRenders}</p>;
}

よくある不純性：Props の変更

コンポーネント内で props オブジェクトを変更してはいけません。Props は読み取り専用です。変更したバージョンが必要な場合は、新しい変数を作成してください。
// Bad
function Badge({ user }) {
  user.name = user.name.toUpperCase(); // mutates prop!
  return <p>{user.name}</p>;
}

// Good
function Badge({ user }) {
  const displayName = user.name.toUpperCase();
  return <p>{displayName}</p>;
}

よくある不純性：レンダリング中の Random / Date の使用

レンダリング中に `Math.random()` や `Date.now()` を直接呼び出すと、呼び出すたびに異なる値が生成され、純粋性が損なわれます。これらは state の初期化処理または useEffect に移してください。
// Bad
function Token() {
  const id = Math.random(); // different every render!
  return <p>{id}</p>;
}

// Good
function Token() {
  const [id] = useState(() => Math.random());
  return <p>{id}</p>;
}

API 呼び出しは useEffect に記述する

コンポーネント関数の本体（useEffect の外側）でデータを直接取得するのは不純な処理です。レンダリングのたびに実行されるためです。取得処理は必ず、適切な依存関係を設定した useEffect に移してください。
// Bad
function Profile({ id }) {
  fetch('/api/user/' + id); // runs on every render!
  return <div />;
}

// Good
useEffect(() => {
  fetch('/api/user/' + id).then(/*...*/);
}, [id]);

ローカルな変更は問題ない

同じレンダリング呼び出しの中で作成したオブジェクトや配列を作成後に変更するのは、まったく問題ありません。ほかのコードから観測できないためです。これはローカルな変更と呼ばれます。
function List({ items }) {
  const sorted = [...items]; // new array
  sorted.sort();             // mutating a local copy: OK
  return sorted.map(i => <li key={i}>{i}</li>);
}

Strict Mode で不純性を見つける

React StrictMode は開発環境でコンポーネントを 2 回呼び出します。2 回の呼び出しの間で UI が一致しない場合や、副作用が重複して発生する場合は、レンダリングが不純です。二重呼び出しが問題を起こさなくなるまで、不純性を修正してください。

純粋なコンポーネントと React.memo

コンポーネントが純粋（同じ props → 同じ出力）である場合、`React.memo` でラップすると、props が変更されていなければ再レンダリングをスキップできることを React に伝えられます。これによりパフォーマンスが向上します。
const Pure = React.memo(function Pure({ value }) {
  return <p>{value}</p>;
});

確認問題

次のうち、React コンポーネントのレンダリング関数内で直接実行してもよい副作用はどれですか？

まとめ

純粋なコンポーネントは、同じ入力に対して常に同じ JSX を返します。レンダリング中に props や外部変数を変更することを避け、副作用には useEffect を使用し、StrictMode で違反を見つけてください。

次のレッスン

次のレッスンは **Key & Ref Best Practices** です。安定した key を正しく使用し、インデックスを key にする落とし穴を避け、コールバック ref を扱う方法を学びます。

よくある質問

「Pure Componentsとrenderでの副作用回避」レッスンは無料ですか？

はい。「Pure Componentsとrenderでの副作用回避」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「Pure Componentsとrenderでの副作用回避」で何を学びますか？

ミューテーションや外部からの読み取りを行わないrender関数を書きます ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「Pure Componentsとrenderでの副作用回避」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. StrictModeの動作
  2. Pure Componentsとrenderでの副作用回避
  3. KeyとRefのベストプラクティス
  4. フォルダー構成と命名規則
← React Academyに戻る