はじめに
この実験では、Reactにおいて特定の条件が真になったときにコールバック関数を最大1回だけ実行するためにuseEffectOnce
フックをどのように使用するかを学びます。これは、コンポーネントがマウントされるときやボタンがクリックされるときなど、特定のアクションを1回だけ実行したい場合に役立ちます。この実験が終了するとき、Reactアプリケーションでこのフックをどのように実装するかについて、より深い理解を得ることができます。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、Reactにおいて特定の条件が真になったときにコールバック関数を最大1回だけ実行するためにuseEffectOnce
フックをどのように使用するかを学びます。これは、コンポーネントがマウントされるときやボタンがクリックされるときなど、特定のアクションを1回だけ実行したい場合に役立ちます。この実験が終了するとき、Reactアプリケーションでこのフックをどのように実装するかについて、より深い理解を得ることができます。
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でさらに多くの実験を練習することができます。