如何將 React useEffect 載入函數限制為單一呼叫？

How to Call a Loading Function Only Once with React useEffect

The useEffect React hook is designed to run the provided function on every change, which can lead to performance issues. However, there are situations where we only want to call the function once, particularly when performing an initial loading process.

Problem:

How can we use the useEffect hook to call an initialization function only on the initial render, preventing it from being invoked on subsequent changes? Suppose we have the following class component:

<code class="javascript">class MyComponent extends React.PureComponent {
    componentDidMount() {
        loadDataOnlyOnce();
    }
    render() { ... }
}</code>

Solution:

Using hooks, we can achieve the desired behavior as follows:

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

Answer:

To restrict the function call to the initial render, we can provide an empty array as the second argument to useEffect:

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

  return &lt;div&gt; {/* ... */} &lt;/div&gt;;
}</code>

By providing an empty array, we instruct useEffect to execute the function only after the initial render. This eliminates the issue of the function being called on every change, ensuring that the loading process is executed only once.

以上是如何將 React useEffect 載入函數限制為單一呼叫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！