From 10c4db04d89c726fbe60cc459edf32a5c8efc177 Mon Sep 17 00:00:00 2001
From: Daniel Han <danielhanchen@gmail.com>
Date: Sun, 15 Mar 2026 06:02:22 +0000
Subject: [PATCH] studio: fix React hooks order -- move useMemo before early
 returns

The useMemo for sortedVariants was placed after the loading/error early
returns, which violated React's rules of hooks (hooks must be called in
the same order every render). Move it before the conditional returns.

Fixes: Minified React error #310
---
 .../assistant-ui/model-selector/pickers.tsx   | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx b/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx
index cc399c39c5..b24536d2f7 100644
--- a/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx
+++ b/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx
@@ -191,21 +191,6 @@ function GgufVariantExpander({
     [repoId, onSelect],
   );
 
-  if (loading) {
-    return (
-      <div className="flex items-center gap-2 px-5 py-2">
-        <Spinner className="size-3 text-muted-foreground" />
-        <span className="text-xs text-muted-foreground">Loading variants…</span>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="px-5 py-2 text-xs text-destructive">{error}</div>
-    );
-  }
-
   const sortedVariants = useMemo(() => {
     if (!variants) return variants;
     return [...variants].sort((a, b) => {
@@ -223,6 +208,21 @@ function GgufVariantExpander({
     });
   }, [variants, defaultVariant, gpuGb]);
 
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 px-5 py-2">
+        <Spinner className="size-3 text-muted-foreground" />
+        <span className="text-xs text-muted-foreground">Loading variants…</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="px-5 py-2 text-xs text-destructive">{error}</div>
+    );
+  }
+
   if (!sortedVariants || sortedVariants.length === 0) {
     return (
       <div className="px-5 py-2 text-xs text-muted-foreground">