React の useEffectOnce フック

はじめに

この実験では、Reactにおいて特定の条件が真になったときにコールバック関数を最大1回だけ実行するためにuseEffectOnceフックをどのように使用するかを学びます。これは、コンポーネントがマウントされるときやボタンがクリックされるときなど、特定のアクションを1回だけ実行したい場合に役立ちます。この実験が終了するとき、Reactアプリケーションでこのフックをどのように実装するかについて、より深い理解を得ることができます。

Skills Graph

React useEffectOnceフック

VM内には既にindex.htmlとscript.jsが用意されています。一般的には、script.jsとstyle.cssにのみコードを追加すればよいです。

以下のコードは、when条件が真になったときにcallbackを1回だけ実行する関数useEffectOnce(callback, when)を実装しています。

この関数を実装するには：

• useRef()フックを使用して、エフェクトの実行状態を追跡するための変数hasRunOnceを作成します。
• when条件が変更されたときにのみ実行されるuseEffect()フックを使用します。
• useEffect()フックの中で、whenがtrueで、かつエフェクトが以前に実行されていないことを確認します。両方がtrueの場合、callbackを実行して、hasRunOnceをtrueに設定します。

const useEffectOnce = (callback, when) => {
  const hasRunOnce = React.useRef(false);
  React.useEffect(() => {
    if (when && !hasRunOnce.current) {
      callback();
      hasRunOnce.current = true;
    }
  }, [when]);
};

ここにuseEffectOnce()の使用例を示します：

const App = () => {
  const [clicked, setClicked] = React.useState(false);
  useEffectOnce(() => {
    console.log("mounted");
  }, clicked);
  return <button onClick={() => setClicked(true)}>Click me</button>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

この例では、useEffectOnce()はボタンが初めてクリックされたときにコンソールに「mounted」とログを出力するために使用されています。useEffectOnce()フックには2つの引数が渡されます：実行するcallbackとチェックするwhen条件です。when条件はclicked状態に設定されているため、callbackはclickedが初めてtrueになったときにのみ実行されます。

右下隅の「Go Live」をクリックして、ポート8080でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたはReact useEffectOnceフックの実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を練習することができます。