1. Utils
  2. proxyMap

proxyMap

use a js Map with Valtio

This utility creates a proxy which mimics the native Map behavior. The API is the same as the Map API.

import { proxyMap } from 'valtio/utils'

const state = proxyMap()
state.size // ---> 0

state.set(1, 'hello')
state.size // ---> 1

state.delete(1)
state.size // ---> 0

Nesting

It can be used inside a proxy as well.

import { proxyMap } from 'valtio/utils'

const state = proxy({
  count: 1,
  map: proxyMap(),
})

When using an object as a key, you can wrap it with ref so it's not proxied. This is useful if you want to preserve the key equality

import { proxyMap } from 'valtio/utils'

// with ref
const key = ref({})
state.set(key, 'hello')
state.get(key) //hello

// without ref
const key = {}
state.set(key, 'value')
state.get(key) //undefined

Codesandbox demo