[React] なるべく状態を少なくしたい

たとえば、在庫数カウントと表示の分岐をひとつにまとめる

商品のJSONをitems、売り切れのプロパティをsoldoutとしている。
propsで親から渡ってきているとして、

function itemStockLength() {
  return items.value.filter(item => item.soldout === false).length
}

この関数で売り切れでない＝在庫のある商品の総数が出す。
総数が0以下の場合は、そのカテゴリ自体を表示しない。

// propsでカテゴリの商品がitemsとして渡ってきているとして

function itemStockLength() {
  return items.value.filter(item => item.soldout === false).length
}

return (
    <>
      {itemStockLength() > 0 ? (
        <Box>
          <Typography component='p'>在庫数：{itemStockLength()}</Typography>
          {items.map((item) => (
              item.name
              item.price
              ...
            )
          }
        </Box>
      ) : (
        <Box>
          <Typography component='p'>在庫のある商品はございません</Typography>
        </Box>
      )}
    <>
)

昔の自分のやっていたこと

const [hasStock, setHasStock] = React.useState(true);
if(itemStockLength() <= 0) setHasStock(false);

return (
      {hasStock ? (
        ...
      ) : (
        ...
      )}
)

状態を持たせていた。

状態管理で大切なのは、状態の数を最小限にすること

たいていのシステムは、後半になると状態管理が複雑になって開発効率が落ちていく。
だから、作らなくてよい状態は作らないほうがよいのでは。
昔の自分は意識できていなかった。

Reactであれば、useStateの前に関数で解決できないか考えたい。