web-dev-qa-db-fra.com

react-hooks: ignorer la première exécution en cours d'utilisation

Comment ignorer la première exécution dans le crochet useEffect.

useEffect(() => {
    const first = // ???
  if (first) {
    // skip
  } else {
    // run main code
  }
}, [id]);
reactjsreact-hooks
11
seyed

Le crochet useRef peut être utilisé pour stocker n'importe quelle valeur modifiable , vous pouvez donc stocker un booléen indiquant si c'est la première fois que l'effet est exécuté.

Exemple 

const { useState, useRef, useEffect } = React;

function MyComponent() {
  const [count, setCount] = useState(0);

  const isFirstRun = useRef(true);
  useEffect (() => {
    if (isFirstRun.current) {
      isFirstRun.current = false;
      return;
    }

    console.log("Effect was run");
  });

  return (
    <div>
      <p>Clicked {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(
  <MyComponent/>,
  document.getElementById("app")
);
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>
32
Tholle