Frequently Asked Questions (FAQ)#

❓ How to Store Unproxied State in Reactive Proxied Store#

You can achieve this by using ref. This is particularly useful when you want to nest an object within the proxy that is not wrapped by the internal proxy (such as storing DOM elements, File objects, and other unstructured data). However, please note that its changes will not be tracked. For more details and considerations, please refer to ref.

❓ When State is Passed to <input />, Input May Be Interrupted#

By default, when the state changes, changes are notified asynchronously to achieve a merged update (i.e., batching) effect, optimizing rendering.

If you want to disable it (for example, when used by an <input /> element, it may conflict with the input method's Composition events), you can set the sync option to true when using store.useSnapshot to notify changes synchronously, avoiding this problem.

1const store = create({ inputValue: '' })
2
3const updateInputValue = (value: string) => {
4  store.mutate.inputValue = value
5}
6
7function App() {
8  const inputValue = store.useSnapshot((s) => s.inputValue, { sync: true })
9
10  return (
11    <input
12      value={inputValue}
13      onChange={(e) => {
14        updateInputValue(e.target.value)
15      }}
16    />
17  )
18}