React JSX内执行计算赋值时如何避免结果显示在页面上

在map遍历逻辑中实现分类条目统计功能：需要统计每个分类下对应的条目总数，再将统计得到的数值赋值给对应分类的属性。该计算逻辑本身运行正常，但存在异常：计算得到的长度值会直接显示在页面上，不符合预期。
原有问题代码如下：

{
  (tab.itemCount = props.items.filter(
    (item) => item.category === tab.category
  ).length)
}

核心诉求：在JSX内部完成上述计算逻辑，同时避免统计得到的长度值被渲染显示在页面上。

JSX中包裹代码的大括号{}是表达式渲染插槽，大括号内表达式的返回值会被React自动渲染到页面对应位置。上述代码里的赋值表达式(tab.itemCount = xxx.length)执行后，返回值就是赋值完成的长度数值，因此会被直接渲染到页面上。

以下两种写法都可以在JSX内部完成计算，同时不会把统计值渲染到页面：

• 方案1：使用逗号操作符，最终返回null（null不会被React渲染）

{
  (tab.itemCount = props.items.filter(
    (item) => item.category === tab.category
  ).length, null)
}

逗号操作符会从左到右依次执行每一段逻辑，最终返回最右侧逗号后的内容，这里最后返回null，页面就不会显示多余的数值。

• 方案2：使用无返回值的立即执行函数包裹逻辑

{
  (() => {
    tab.itemCount = props.items.filter(
      (item) => item.category === tab.category
    ).length
  })()
}

该立即执行函数没有显式return返回值，默认返回undefined，undefined同样不会被React渲染，也能达到预期效果。

最佳实践提示：不推荐在JSX渲染表达式中写变量赋值这类带副作用的逻辑，更合理的方式是在执行map遍历渲染前，就提前完成所有分类的条目数统计，避免渲染阶段重复执行计算引发性能问题或状态不一致。如果确实需要在JSX内完成计算，以上两种写法均可生效。

内容的提问来源于stack exchange，提问作者Barty