React useEffect Loading関数を単一の呼び出しに制限するにはどうすればよいですか?

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 Loading関数を単一の呼び出しに制限するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。