Reactで画面描画後に処理をさせる方法

Reactで画面描画後に処理をさせる方法

Reactで画面描画後に処理をさせるためには、useEffectフックを使用します。
以下はそのソースコード例です。

ソースコード例

import React, { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    // ここに画面描画後に実行したい処理を記述します
    console.log('画面が描画されました。
');
    
    // 例として、5秒後にアラートを表示する
    setTimeout(() => {
      alert('5秒が経過しました！');
    }, 5000);

  }, []); // 第2引数に空の配列を渡すことで、初回レンダリング後にのみ実行されます

  return (
    <div>
      <h1>React useEffect Example</h1>
      <p>このコンポーネントが描画された後に処理が実行されます。</p>
    </div>
  );
};

export default App;

説明

• useEffectフックは、Reactコンポーネントが画面に描画された後に実行される関数を定義するために使用されます。
• 上記の例では、console.logでメッセージを表示し、5秒後にアラートを表示する処理を実行しています。
• useEffectの第2引数に空の配列[]を渡すことで、この効果はコンポーネントの初回レンダリング後にのみ実行されます。

この方法を使うことで、画面が描画された後に必要な処理を実行することができます。