javascript - useReducer( reducer, getInitialState() ) で使用される getInitialState() 関数をレンダリングごとに実行しないようにするにはどうすればよいですか?

Question

以下のスニペットを参照してください。

これを行うことにより：

React.useState(()=>getInitialState2());

レンダリングごとにgetInitialState2()used inを実行することを避けます。useState

useReducerしかし、それはフックでは機能しないようです。

質問

すべてのレンダーでフックのinitialStateパラメーターで使用される関数の実行を回避する方法はありますか?useReducer

function App() {
  
  const [state,dispatch] = React.useReducer(reducer,getInitialState());
  const [state2,setState2] = React.useState(()=>getInitialState2());
  
  return(
    <React.Fragment>
      <div>
        State: {state}
      </div>
      <div>
        State2: {state2}
      </div>
      <div>
        <button onClick={() => dispatch({type: "INCREMENT"})}>+</button>
        <button onClick={() => dispatch({type: "DECREMENT"})}>-</button>
      </div>
    </React.Fragment>
  );
}

function getInitialState() {
  console.log("From getInitialState...");
  return 0;
}

function getInitialState2() {
  console.log("From getInitialState2...");
  return 0;
}

function reducer(state,action) {
  switch(action.type) {
    case "INCREMENT": {
      return state + 1;
    }
    case "DECREMENT": {
      return state - 1;
    }
    default: {
      return state;
    }
  }
}

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