ReactにおけるuseEffectフック

エフェクトを扱うには、 フック useEffect が使用されます。 その動作を見てみましょう。

まず、フックをインポートします:

App.jsximport { useEffect } from 'react';

タイトルを含むコンポーネント App を作成しましょう:

App.jsxfunction App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;

レンダリング後に何らかのアクション、例えばページ全体の背景色の設定などを行う必要があるとします。この場合、外部システムはブラウザのDOMです。

フックを適用します:

App.jsxfunction App() {
  useEffect(() => {
    document.body.style.backgroundColor = 'green';
  }, []);
  
  ...
}

第2引数には依存配列が渡されます。 そこにはコンポーネントの関数で使用される値が含まれます。今のところ、それは空のままです。 この場合、色はレンダリング後に一度だけ緑に設定されます。 第2引数を完全に省略することはできません。 そうすると、コンポーネントが無限ループに陥る可能性があります。