valtio와 zustand의 차이점

zustand는 변경 불가능한 상태 모델

 

const store = create(() => ({ obj: { count: 0 } }))
store.setState((prev) => ({ obj: { count: prev.obj.count + 1 } })

 

valtio는 변경 가능한 상태 모델이다  

 

렌더링 최적화

zustand는 수동으로 렌더링을 최적화 해줘야한다.

 

import create from 'zustand'



const useStore = create(() => ({

  count1: 0,

  count2: 1,

}))



const Component = () => {

  const count1 = useStore((state) => state.count1) 

  // ...

}

 valtio는 useSnapshot으로 자동으로 렌더링을 최적화

 

import { proxy, useSnapshot } from 'valtio'



const state = proxy({

  count1: 0,

  count2: 0,

})



const Component = () => {

  const { count1 } = useSnapshot(state)

  // ...

}