Comment appeler une fonction une seule fois dans React à l'aide de 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!