useEffectを使用してReactで関数を1回だけ呼び出す方法?

How to Trigger a Function Only Once Using React's useEffect

React's useEffect hook serves as a replacement for class life-cycle methods. It allows developers to perform side effects in functional components. However, useEffect by default runs the provided function on every render.

Consider a scenario where you want to initialize data upon component mounting but prevent subsequent calls on state changes. For instance, loading an entity where the loading function doesn't depend on any component state.

Previously, in class components, this would be achieved using componentDidMount, which only triggers once. In functional components using useEffect, you can replicate this behavior as follows:

<code class="javascript">function MyComponent() {
    useEffect(() => {
        loadDataOnlyOnce(); // this will fire on every change :(
    }, [...???]);
    return (...);
}</code>

To restrict the function call to just the initial render, pass an empty array as the second argument to useEffect. This instructs React to execute the function only once, after the first render:

<code class="javascript">function MyComponent() {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);

  return <div> {/* ... */} </div>;
}</code>

By following this approach, you can effectively trigger a loading function only once using React's useEffect hook, similar to how componentDidMount worked in class components.

以上がuseEffectを使用してReactで関数を1回だけ呼び出す方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。