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

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

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

**错误写法：**

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

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

**正确写法：**

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

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