Unknown cause of janky behavior in React Component
I'm building the following component which uses the standard pattern of binding convex data to a UI component directly. However, as you can see in the video, when I update data in the Convex dashboard there's some strange behavior where the state initially updates as desired, but then the component completely rebuilds, which is undesired. Am I doing something wrong?
const SortPage: React.FC<SortPageProps> = ({ navigateTo, activeTableView }) => {
const cSorts = useQuery(api.queries.tableViews.getSortsByTableViewId, {
tableViewId: activeTableView._id,
});
const cUpdateSorts = useMutation(api.mutations.tableViews.updateSorts);
return (
<>
<div className="px-4 flex flex-col gap-4 mb-4">
<div className="flex flex-col gap-2">
{cSorts?.length === 0 && newSorts.length === 0 ? (
<div className="px-4 pt-2 pb-4 flex flex-col items-center justify-center text-center">
<PiArrowUpDuoStroke className="h-12 w-12 text-primary/30 mb-4" />
<p className="text-sm text-primary/60 font-medium mb-2">
No sorting added yet
</p>
<p className="text-xs text-primary/40">
Add a sort to sort your results
</p>
</div>
) : (
<>
<p className="text-sm font-medium text-primary/60">Sort by</p>
<div className="flex flex-col gap-3">
{cSorts?.map((sort, index) => {
return (
<SortItem
key={index}
type="existing"
sort={sort}
collectionId={activeTableView.collectionId}
/>
);
})}
</div>
</>
)}
</div>
</div>
...const SortPage: React.FC<SortPageProps> = ({ navigateTo, activeTableView }) => {
const cSorts = useQuery(api.queries.tableViews.getSortsByTableViewId, {
tableViewId: activeTableView._id,
});
const cUpdateSorts = useMutation(api.mutations.tableViews.updateSorts);
return (
<>
<div className="px-4 flex flex-col gap-4 mb-4">
<div className="flex flex-col gap-2">
{cSorts?.length === 0 && newSorts.length === 0 ? (
<div className="px-4 pt-2 pb-4 flex flex-col items-center justify-center text-center">
<PiArrowUpDuoStroke className="h-12 w-12 text-primary/30 mb-4" />
<p className="text-sm text-primary/60 font-medium mb-2">
No sorting added yet
</p>
<p className="text-xs text-primary/40">
Add a sort to sort your results
</p>
</div>
) : (
<>
<p className="text-sm font-medium text-primary/60">Sort by</p>
<div className="flex flex-col gap-3">
{cSorts?.map((sort, index) => {
return (
<SortItem
key={index}
type="existing"
sort={sort}
collectionId={activeTableView.collectionId}
/>
);
})}
</div>
</>
)}
</div>
</div>
...
