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 callback triggers for every change in position while moving a Node.
* I could instead use the onNodeDragStop callback to only update the state once the user has finished moving a node.
I'm currently thinking I would have:
* useNodes hook for getting the nodes state from the server and maintaining the cache.
* a useUpdateNode mutation for updating the node state on the server and invalidating the query.
* and use 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 🙂0 Replies