How to batch multiple store updates?

[raviteja83]

I have a websocket where I receive messages and store them in a zustand store. Sometimes, I would receive more than 40msg/sec or so. For each message I am converting the object to a particular format and storing in zustand store. In this case, 40 setState have happened. Each updating the same fields(adding to the existing list). Also, I am rendering the above messages in a virtualised list
How do I improve the handling of this and reduce the number of setState calls? After sometime, the UI is frozen and CPU usage goes to 100%. What can I do to prevent the UI freeze?

[dai-shi]

For frequent updates, we shouldn't trigger React for each update.

One technique is known as transient update.

zustand/readme.md

Lines 247 to 262 in 517524d

	## Transient updates (for often occurring state-changes)
	The subscribe function allows components to bind to a state-portion without forcing re-render on changes. Best combine it with useEffect for automatic unsubscribe on unmount. This can make a [drastic](https://codesandbox.io/s/peaceful-johnson-txtws) performance impact when you are allowed to mutate the view directly.
	```jsx
	const useScratchStore = create((set) => ({ scratches: 0, ... }))
	const Component = () => {
	// Fetch initial state
	const scratchRef = useRef(useScratchStore.getState().scratches)
	// Connect to the store on mount, disconnect on unmount, catch state-changes in a reference
	useEffect(() => useScratchStore.subscribe(
	state => (scratchRef.current = state.scratches)
	), [])
	...
	```

There might be another way, but we shouldn't use useStore directly in all such cases.

---

If anyone has similar experience, don't hesitate to share ideas.

[raviteja83]

I have used transient in other places, here I have to render the message as well. Need to figure out a way to do this with transient updates(I am using virtualised list here). I was trying to batch that event, for some interval, seems to be better performant but still need to more testing. Any other ideas are welcome.

[dai-shi]

another idea would be batching updates outside of Zustand.

[gabrr]

I would put those updates in a queue, save them in an object, within 60/120 seconds an agent would be responsible to check that object and set the data to the you’re using currently — that’s important so your whole UI don’t keep being updated. Best regards, Gabriel Oliveira +55 48 99107 5872

…

On Dec 28, 2023 at 10:07 -0300, Daishi Kato ***@***.***>, wrote: another idea would be batching updates outside of Zustand. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>