Convex useQuery pattern
❔Advice
Hey folks! I am always back and forth between how I should be using Convex queries and UI component together. For example, in React I could have a component
<UserProfileCard ... /><UserProfileCard ... /> on the user's profile page which has other components which consume the data from the User (Doc<"users">Doc<"users">). Now I is it better to say write the Convex hook on the profile page and pass the Doc<"users"> Doc<"users"> into the component so <UserProfileCard user={user} /><UserProfileCard user={user} /> and const user = useQuery(api.currentUser);const user = useQuery(api.currentUser); on the page and say <EditUserProfile defaultValues={user} /><EditUserProfile defaultValues={user} /> is also on that page. Or, the other pattern I feel like is good for reusability is just <UserProfileCard /><UserProfileCard /> where the const user = useQuery(api.currentUser);const user = useQuery(api.currentUser); is in the component file and I don't need to pass in the user doc, however I would still need the hook at the page-level for the <EditUserProfile ..<EditUserProfile .. component so would this not duplicate the query unecessarily on that page and cause popcorn loading as different ocmponentns load the data at different times?
