fix(webapp): preserve React hook order

Author: carderne

apps/webapp/app/components/SetupCommands.tsx

@@ -57,7 +57,7 @@ function useApiUrl() {
   }
 }
 
-function getApiUrlArg() {
+function useApiUrlArg() {
   const apiUrl = useApiUrl();
   return apiUrl ? `-a ${apiUrl}` : undefined;
 }
@@ -70,7 +70,7 @@ type TabsProps = {
 export function InitCommandV3({ title }: TabsProps) {
   const project = useProject();
   const projectRef = project.externalRef;
-  const apiUrlArg = getApiUrlArg();
+  const apiUrlArg = useApiUrlArg();
   const triggerCliTag = useTriggerCliTag();
 
   const initCommandParts = [`trigger.dev@${triggerCliTag}`, "init", `-p ${projectRef}`, apiUrlArg];

apps/webapp/app/components/primitives/Tabs.tsx

@@ -234,17 +234,15 @@ export function TabButton({
 } & React.ButtonHTMLAttributes<HTMLButtonElement>) {
   const ref = useRef<HTMLButtonElement>(null);
 
-  if (shortcut) {
-    useShortcutKeys({
-      shortcut: shortcut,
-      action: () => {
-        if (ref.current) {
-          ref.current.click();
-        }
-      },
-      disabled: props.disabled,
-    });
-  }
+  useShortcutKeys({
+    shortcut,
+    action: () => {
+      if (ref.current) {
+        ref.current.click();
+      }
+    },
+    disabled: props.disabled,
+  });
 
   const title = variant === "title";
 

apps/webapp/app/hooks/useTypedMatchData.ts

@@ -23,11 +23,9 @@ export function useTypedMatchesData<T = AppData>({
   id: string;
   matches?: UIMatch[];
 }): UseDataFunctionReturn<T> | undefined {
-  if (!matches) {
-    matches = useMatches();
-  }
+  const routeMatches = useMatches();
 
-  return useTypedDataFromMatches<T>({ id, matches });
+  return useTypedDataFromMatches<T>({ id, matches: matches ?? routeMatches });
 }
 
 function useTypedMatchData<T = AppData>(