T

TanStack•3y ago

dangerous-fuchsia

Using React Query for state management with React Flow

Hello,

I've built a nextjs application using React Flow (flowchart package) and Zustand for client-side state management of the RF Nodes (flowchart boxes). I'm using React Query for server state management and synchronization for everything else in the application.

I'm trying to decide if I should rip out Zustand and replace it with RQ for Node state management or If I need to build some kind of bridge.

There would be serious performance issues if I mutate the state and trigger a server update on every small state change in the ReactFlow chart:
* For example the

onChange

onChange

callback triggers for every change in position while moving a Node.
* I could instead use the onNodeDragStoponNodeDragStop callback to only update the state once the user has finished moving a node.

I'm currently thinking I would have:
* useNodesuseNodes hook for getting the nodes state from the server and maintaining the cache.
* a useUpdateNodeuseUpdateNode mutation for updating the node state on the server and invalidating the query.
* and use

setQueryData

setQueryData

to iterate through the nodes and update the target node after mutation

Is this the correct approach?
Are there any other performance issues I need to think about?

Thanks in advance this is my first project with RF