web-dev-qa-db-fra.com

Où dois-je déclarer les fonctions qui sont appelées dans un hook useEffect ()?

J'ai donc la situation suivante lors de l'utilisation d'un useEffect qui appelle une fonction qui dépend de l'état.

Exemple:

// INSIDE APP COMPONENT

const [someState, setSomeState] = React.useState(0);
const [someTrigger, setSomeTrigger] = React.useState(false);

function someFunction() {
  return someState + 1;  
}

React.useEffect(() => {

  const newState = someFunction();  // 'someFunction' IS BEING CALLED HERE
  setSomeState(newState);

},[someTrigger])

QUESTIONS:

Dans ce cas, dois-je déclarer someFunction à l'intérieur de la useEffect() ou est-il sûr de le garder à l'extérieur (mais à l'intérieur du corps du composant)?

Je pourrais l'ajouter au tableau dependency, mais cela nuira à la réductibilité de mon code, car je veux me concentrer sur le trigger.

Étant donné que la useEffect() s'exécutera après un nouveau rendu, est-il sûr de supposer qu'elle aura de nouvelles copies des fonctions que j'appelle à l'intérieur?

Existe-t-il une règle de base sur le moment où vous devez déclarer des fonctions à l'intérieur du hook useEffect ou quand est-il obligatoire de l'ajouter au tableau de dépendances?

EDIT: Notez qu'il est nécessaire que le useEffect ait de nouvelles copies de ces fonctions, car ces fonctions doivent accéder à une nouvelle variable state mise à jour.

REMARQUE:

Ce code déclenche ce qui suit avertissement eslint sur CodeSandbox. Bien que cela fonctionne très bien.

React Hook React.useEffect a une dépendance manquante: 'someFunction'. Incluez-le ou supprimez le tableau de dépendances. (react-hooks/exhaust-deps) eslint

SCÉNARIO DE CAS RÉEL:

Ceci est un exemple simplifié. Dans mon cas réel, il s'agit d'une page de recherche de produit avec des composants de filtres. Donc, quand je clique sur un filtre pour l'activer (disons, price <= 50), Je déclenche une useEffect() qui "écoute" la variable d'état activePriceFilters. Cet effet appelle ensuite une fonction (someFunction dans l'exemple) qui calculera le filteredList et définira le nouvel état productList avec le nouveau filteredList.

EXTRAIT 

function App() {
  
  const [someState, setSomeState] = React.useState(0);
  const [someTrigger, setSomeTrigger] = React.useState(false);
  
  function someFunction() {
    return someState + 1;  
  }
  
  React.useEffect(() => {
  
    const newState = someFunction();
    setSomeState(newState);
  
  },[someTrigger])
  
  return(
    <React.Fragment>
      <div>I am App</div>
      <div>My state: {someState}</div>
      <button onClick={()=>setSomeTrigger((prevState) => !prevState)}>Click</button>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
javascriptreactjsreact-hooksuse-effect
5
cbdeveloper

La définition d'un autre état ne devrait pas du tout être un effet.

 const [someState, setSomeState] = React.useState(0);

 function increaseState() {
    setSomeState(someState + 1);
 }
1
Jonas Wilms