Reactのコンポーネントを描画するときに、reduxの`state`を更新すると無限ループに陥る

備忘録

下記のコンポーネントは、reduxから配列のオブジェクト(state.items)を取得し、
描画時に配列の値で何らかの処理を行い、stateの更新と画面に描画する値を同時に返している。

描画の時に関数を実行し、必要な算出処理とstateの更新を行い、
関数の戻り値で画面の描画を行おうとしている。

const Component = () => {
  const items = useSelector((state) => state.items);

  const calcTotal = (item) => {
    let total;

    /**
      何らかの処理
    */

    // state.itemsの更新
    dispatch({type: "EDIT_ITEM", payload: { total }})

    // 戻り値
    return total;
  }

  return (
    <>
      {items.map((item) => (
        <div>
          <p>{calcTotal(item)}</p>
        </div>
      )
      )}
    </>
  )
};

export default AppVelocityView;

しかし、これは非常にバッドなアイデアで、
このコンポーネントはstate.itemsが更新されると再描画するコンポーネントになっている。
そのため、画面描画 → stateの更新(画面描画時にcalcTotalが実行される） → （state.itemsが更新されたため）再描画 → stateの更新(画面描画時にcalcTotalが実行される） → （state.itemsが更新されたため）再描画 ......
と、無限ループに陥る。