javascript - useEffect() フック内で呼び出される関数はどこで宣言すればよいですか?

Question

したがってuseEffect、状態に依存する関数を呼び出す a を使用すると、次のような状況になります。

例：

// 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])

質問:

この場合、someFunction内部で宣言する必要がありますか、useEffect()それとも外部 (ただし、コンポーネントの本体の内部) に保持しても安全ですか?

dependency配列に追加することもできますが、 trigger.

useEffect()は新しいレンダリングの後に実行されるため、内部で呼び出している関数の新しいコピーがあると想定しても安全ですか?

フック内でいつ関数を宣言する必要があるuseEffectか、またはいつ依存関係配列に追加することが必須であるかについての基本的なルールはありますか?

編集:これらの関数は新しい最新の変数useEffectにアクセスする必要があるため、これらの関数の新しいコピーが必要であることに注意してください。state

ノート：

このコードは、CodeSandbox で次のeslint 警告をトリガーします。それはうまくいきますが。

React フック React.useEffect には依存関係がありません: 「someFunction」。それを含めるか、依存配列を削除してください。(react-hooks/exhaustive-deps)eslint

実際のシナリオ:

これは簡単な例です。私の実際のケースでは、これはフィルター コンポーネントを含む製品検索ページです。したがって、フィルターをクリックしてアクティブ化すると (たとえば、 )、状態変数を「リッスン」している がprice <= 50トリガーされます。次に、その効果はを計算する関数 (例では) を呼び出し、 new で新しい状態を設定します。useEffect()activePriceFilterssomeFunctionfilteredListproductListfilteredList

スニペット

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"/>