Re-rendering Behavior Migrating from Vue/Pinia to React/Zustand with Convex

[calebeaires]

Hello Convex community,

I'm facing a technical challenge and would appreciate your insights:

Context

• I originally built a task management app using Vue and Pinia for state management.
• The data loading flow is as follows:

1. Check members
2. Fetch workspaces
3. Fetch projects
4. Fetch tasks

This process is cascading to ensure all necessary data is ready for the app.

In Vue, with Pinia and computed properties, loading data from the Convex Database does not cause excessive re-renders of parent and child components. The flow is smooth and efficient.

Issue After Migrating to React

After migrating the application to React with Zustand for state management, I noticed that each step of data loading (members, workspaces, projects, tasks) is causing re-renders of related components (both parents and children).

Questions

• Why does this not happen in Vue (with Pinia and computed properties), but does occur in React (with Zustand)?
• Is there any configuration or best practice when using Convex + React to avoid these cascading re-renders?
• How can I optimize this data flow in React to achieve behavior similar to what I experienced with Vue?

Notes

• The React app follows the same data flow logic as the Vue app.
• I am using the basic recommendations from the Convex, Zustand, and React documentation.

Any technical explanation, guidance, or suggestions on how to approach or resolve this behavior would be greatly appreciated.

Thank you!