如何在 React 中使用 useEffect 只呼叫一次函數？

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(() =&gt; {
        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(() =&gt; {
    loadDataOnlyOnce();
  }, []);

  return &lt;div&gt; {/* ... */} &lt;/div&gt;;
}</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.

以上是如何在 React 中使用 useEffect 只呼叫一次函數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！