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

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!