1---
2title: Do not wrap a simple expression with a primitive result type in useMemo
3impact: LOW-MEDIUM
4impactDescription: wasted computation on every render
5tags: rerender, useMemo, optimization
6---
7 
8## Do not wrap a simple expression with a primitive result type in useMemo
9 
10When an expression is simple (few logical or arithmetical operators) and has a primitive result type (boolean, number, string), do not wrap it in `useMemo`.
11Calling `useMemo` and comparing hook dependencies may consume more resources than the expression itself.
12 
13**Incorrect:**
14 
15```tsx
16function Header({ user, notifications }: Props) {
17  const isLoading = useMemo(() => {
18    return user.isLoading || notifications.isLoading
19  }, [user.isLoading, notifications.isLoading])
20 
21  if (isLoading) return <Skeleton />
22  // return some markup
23}
24```
25 
26**Correct:**
27 
28```tsx
29function Header({ user, notifications }: Props) {
30  const isLoading = user.isLoading || notifications.isLoading
31 
32  if (isLoading) return <Skeleton />
33  // return some markup
34}
35```
36