skillhub-088-vercel-react-best-practices/rules/rerender-simple-expression-in-memo.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
不要将返回原始类型结果的简单表达式包裹在 useMemo 中	中低	每次渲染都会产生不必要的计算开销	重新渲染, useMemo, 优化

不要将返回原始类型结果的简单表达式包裹在 useMemo 中

当表达式很简单（只包含少量逻辑或算术运算符）且结果类型为原始类型（布尔值、数字、字符串）时，不要将其包裹在 useMemo 中。调用 useMemo 以及对比 Hook 依赖项所消耗的资源，可能比表达式本身的计算开销还要大。

错误写法：

function Header({ user, notifications }: Props) {
  const isLoading = useMemo(() => {
    return user.isLoading || notifications.isLoading
  }, [user.isLoading, notifications.isLoading])

  if (isLoading) return <Skeleton />
  // 返回一些标记
}

正确写法：

function Header({ user, notifications }: Props) {
  const isLoading = user.isLoading || notifications.isLoading

  if (isLoading) return <Skeleton />
  // 返回一些标记
}