공식문서: Prevent rerenders with useShallow

shallow란

객체나 배열의 최상위 레벨에서만 비교를 수행하는 얕은 비교 방식이다.
중첩된 객체나 배열의 내부 변경사항은 감지하지 않는다.

zustand에서의 shallow

Zustand에서 shallow 비교는 불필요한 리렌더링을 방지하는 역할을 한다. 상태가 변경될 때마다 컴포넌트가 리렌더링된다면, 애플리케이션의 성능이 저하될 수 있다. shallow 비교를 통해 실제로 사용하는 상태만 변경되었을 때 리렌더링이 일어나도록 최적화할 수 있다.

각 곰과 연관된 스토어가 있고 그 이름을 렌더링하려고 합니다.

import { create } from 'zustand'

const useMeals = create(() => ({
  papaBear: 'large porridge-pot',
  mamaBear: 'middle-size porridge pot',
  littleBear: 'A little, small, wee pot',
}))

export const BearNames = () => {
  const names = useMeals((state) => Object.keys(state))

  return <div>{names.join(', ')}</div>
}

이제 아빠 곰은 대신 피자를 먹고 싶어한다면

useMeals.setState({
  papaBear: 'a large pizza',
})

이 변경으로 인해 shallow equal(얕은 등호)에 따라 이름의 실제 출력은 변경되지 않았음에도 BearNames가 다시 렌더링된다.

이제 useShallow를 사용해보자.

import { create } from 'zustand'
import { useShallow } from 'zustand/react/shallow'

const useMeals = create(() => ({
  papaBear: 'large porridge-pot',
  mamaBear: 'middle-size porridge pot',
  littleBear: 'A little, small, wee pot',
}))

export const BearNames = () => {
  const names = useMeals(useShallow((state) => Object.keys(state)))

  return <div>{names.join(', ')}</div>
}

useShallow를 사용함으로써, papaBear의 식사가 변경되더라도 BearNames 컴포넌트는 리렌더링되지 않는다. 왜냐하면 Object.keys(state)의 결과가 변경되지 않았기 때문이다.