Wie rufe ich eine Funktion nur einmal in React mit useEffect auf?

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.

Das obige ist der detaillierte Inhalt vonWie rufe ich eine Funktion nur einmal in React mit useEffect auf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!