From 2f5776480fa304f6ea94e64b434d303fe95168fd Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 17:25:55 +0100
Subject: [PATCH] fix(webapp): call hooks directly and unconditionally

---
 apps/webapp/app/components/primitives/Select.tsx | 7 ++++---
 apps/webapp/app/hooks/useChanged.ts              | 3 +--
 apps/webapp/app/hooks/useOrganizations.ts        | 3 ++-
 apps/webapp/app/hooks/useProject.tsx             | 3 ++-
 apps/webapp/app/hooks/useUser.ts                 | 3 ++-
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Select.tsx b/apps/webapp/app/components/primitives/Select.tsx
index de453f3eb8e..70cc919a07a 100644
--- a/apps/webapp/app/components/primitives/Select.tsx
+++ b/apps/webapp/app/components/primitives/Select.tsx
@@ -1,6 +1,7 @@
 import * as Ariakit from "@ariakit/react";
 import { type SelectProps as AriaSelectProps } from "@ariakit/react";
 import { SelectValue } from "@ariakit/react-core/select/select-value";
+import { useStoreState } from "@ariakit/react-core/utils/store";
 import { Link } from "@remix-run/react";
 import * as React from "react";
 import { Fragment, useMemo, useState } from "react";
@@ -484,7 +485,7 @@ export function SelectItem({
   const render = combobox ? <Ariakit.ComboboxItem render={props.render} /> : props.render;
   const ref = React.useRef<HTMLDivElement>(null);
   const select = Ariakit.useSelectContext();
-  const selectValue = select?.useState("value");
+  const selectValue = useStoreState(select, "value");
 
   const isChecked = React.useMemo(() => {
     if (!props.value || selectValue == null) return false;
@@ -692,8 +693,8 @@ export function ComboBox({
   ...props
 }: ComboBoxProps) {
   const combobox = Ariakit.useComboboxContext();
-  const open = combobox?.useState("open");
-  const input = combobox?.useState("baseElement");
+  const open = useStoreState(combobox, "open");
+  const input = useStoreState(combobox, "baseElement");
 
   React.useEffect(() => {
     if (!open || !input) return;
diff --git a/apps/webapp/app/hooks/useChanged.ts b/apps/webapp/app/hooks/useChanged.ts
index e2f1b6215a0..430c1605a52 100644
--- a/apps/webapp/app/hooks/useChanged.ts
+++ b/apps/webapp/app/hooks/useChanged.ts
@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react";
 
 /** Call a function when the id of the item changes */
 export function useChanged<T extends { id: string }>(
-  getItem: () => T | undefined,
+  item: T | undefined,
   action: (item: T | undefined) => void,
   sendInitialUndefined = true
 ) {
@@ -10,7 +10,6 @@ export function useChanged<T extends { id: string }>(
   const isInitialRender = useRef(true);
   const actionRef = useRef(action);
   const itemRef = useRef<T | undefined>();
-  const item = getItem();
   const itemId = item?.id;
 
   actionRef.current = action;
diff --git a/apps/webapp/app/hooks/useOrganizations.ts b/apps/webapp/app/hooks/useOrganizations.ts
index 4070976dafb..4cd603b29e8 100644
--- a/apps/webapp/app/hooks/useOrganizations.ts
+++ b/apps/webapp/app/hooks/useOrganizations.ts
@@ -43,7 +43,8 @@ export function useOrganization(matches?: UIMatch[]) {
 }
 
 export const useOrganizationChanged = (action: (org: MatchedOrganization | undefined) => void) => {
-  useChanged(useOptionalOrganization, action);
+  const organization = useOptionalOrganization();
+  useChanged(organization, action);
 };
 
 export function useIsImpersonating(matches?: UIMatch[]) {
diff --git a/apps/webapp/app/hooks/useProject.tsx b/apps/webapp/app/hooks/useProject.tsx
index 2280694c102..2e04322c27f 100644
--- a/apps/webapp/app/hooks/useProject.tsx
+++ b/apps/webapp/app/hooks/useProject.tsx
@@ -24,5 +24,6 @@ export function useProject(matches?: UIMatch[]) {
 }
 
 export const useProjectChanged = (action: (org: MatchedProject | undefined) => void) => {
-  useChanged(useOptionalProject, action);
+  const project = useOptionalProject();
+  useChanged(project, action);
 };
diff --git a/apps/webapp/app/hooks/useUser.ts b/apps/webapp/app/hooks/useUser.ts
index aa86ba63865..2eed91b9734 100644
--- a/apps/webapp/app/hooks/useUser.ts
+++ b/apps/webapp/app/hooks/useUser.ts
@@ -27,7 +27,8 @@ export function useUser(matches?: UIMatch[]): User {
 }
 
 export function useUserChanged(callback: (user: User | undefined) => void) {
-  useChanged(useOptionalUser, callback);
+  const user = useOptionalUser();
+  useChanged(user, callback);
 }
 
 /**