From e74ccefbb903dd37ae2e22610d173c986e016ee3 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Wed, 29 Jul 2026 20:28:01 -0400
Subject: [PATCH 1/3] fix(docs): add cursor-pointer to tabs and copy controls
 (#48380)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix / polish

## What is the current behavior?

Some docs interactive controls (copy buttons, tab triggers) do not show
a pointer cursor on hover, so they feel less clickable than surrounding
links. Called out on https://github.com/supabase/supabase/pull/48318.

## What is the new behavior?

Adds `cursor-pointer` in one sweep so related controls stay consistent:

- Shared `TabsTrigger` in `packages/ui` (covers PromptPanel AI Prompt /
CLI tabs, including the unselected tab)
- PromptPanel copy button and Show more / Show less
- Guides sidebar “Copy as Markdown”
- Docs code block copy button

## To test

Hover the controls below and confirm the cursor is `pointer` on both
selected and unselected tabs, and on copy buttons.

### Docs
Preview:
https://docs-git-dnywh-docs-cursor-pointer-supabase.vercel.app/docs

- Homepage setup prompt: [AI Prompt / CLI tabs +
copy](https://docs-git-dnywh-docs-cursor-pointer-supabase.vercel.app/docs)
- Quickstart prompt: [Show more / Show less +
copy](https://docs-git-dnywh-docs-cursor-pointer-supabase.vercel.app/docs/guides/getting-started/quickstarts/nextjs)
- Guide sidebar + code block: [Copy as Markdown + code
copy](https://docs-git-dnywh-docs-cursor-pointer-supabase.vercel.app/docs/guides/database/tables)

### Design system
Preview:
https://design-system-git-dnywh-docs-cursor-pointer-supabase.vercel.app/design-system

- Shared tabs demo: [Account / Password
triggers](https://design-system-git-dnywh-docs-cursor-pointer-supabase.vercel.app/design-system/docs/components/tabs)

### UI library
Preview:
https://ui-library-git-dnywh-docs-cursor-pointer-supabase.vercel.app/ui

- Install command package-manager tabs (npm / pnpm / yarn / bun) + copy:
[Password-based
auth](https://ui-library-git-dnywh-docs-cursor-pointer-supabase.vercel.app/ui/docs/nextjs/password-based-auth)

### Studio (staging)
Preview:
https://studio-staging-git-dnywh-docs-cursor-pointer-supabase.vercel.app

- Auth user panel: open a project → Authentication → Users → select a
user → hover Overview / Logs (and related) tabs
- Connect sheet: open Connect on a project → hover the install method
tabs

### Studio (self-hosted)
Preview:
https://studio-self-hosted-git-dnywh-docs-cursor-pointer-supabase.vercel.app

- Same `TabsTrigger` callsites as Studio staging (user panel / Connect
sheet)

### WWW
Preview:
https://zone-www-dot-com-git-dnywh-docs-cursor-pointer-supabase.vercel.app

- Blog chart tabs (`PGChart` → shared `TabsTrigger`): [Latency / Number
of results / Average latency / Raw
data](https://zone-www-dot-com-git-dnywh-docs-cursor-pointer-supabase.vercel.app/blog/postgres-full-text-search-vs-the-rest)
(scroll to the Results section)

## Additional context

Split out from #48318 so the homepage prompt polish stays focused.
Prefer fixing the shared tab trigger rather than only the PromptPanel
copy button, otherwise the copy control would show pointer while an
unselected CLI tab would not.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Improved hover feedback across the docs UI by adding a pointer cursor
to “Copy as Markdown,” code block copy and word-wrap controls, prompt
copy buttons, and tab selectors.
* Updated cursor styling consistently so interactive controls better
communicate clickability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/docs/components/GuidesSidebar.tsx               | 2 +-
 apps/docs/features/ui/CodeBlock/CodeBlock.client.tsx | 4 ++--
 apps/docs/features/ui/PromptPanel.tsx                | 2 +-
 packages/ui/src/components/shadcn/ui/tabs.tsx        | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/docs/components/GuidesSidebar.tsx b/apps/docs/components/GuidesSidebar.tsx
index 203ba9fedaefe..a247ca6e9121b 100644
--- a/apps/docs/components/GuidesSidebar.tsx
+++ b/apps/docs/components/GuidesSidebar.tsx
@@ -76,7 +76,7 @@ function AiTools({ className }: { className?: string }) {
         <button
           tabIndex={0}
           onClick={copyMarkdown}
-          className="flex items-center gap-1.5 text-xs text-foreground-lighter hover:text-foreground text-left transition-colors"
+          className="flex cursor-pointer items-center gap-1.5 text-xs text-foreground-lighter hover:text-foreground text-left transition-colors"
         >
           {copied ? (
             <Check size={14} strokeWidth={1.5} className="text-brand" />
diff --git a/apps/docs/features/ui/CodeBlock/CodeBlock.client.tsx b/apps/docs/features/ui/CodeBlock/CodeBlock.client.tsx
index 982d576bffd9e..2db18ab15c46b 100644
--- a/apps/docs/features/ui/CodeBlock/CodeBlock.client.tsx
+++ b/apps/docs/features/ui/CodeBlock/CodeBlock.client.tsx
@@ -113,7 +113,7 @@ export function CodeCopyButton({ className, content }: { className?: string; con
             onClick={handleCopy}
             onBlur={resetStatus}
             className={cn(
-              'border rounded-md p-1',
+              'cursor-pointer border rounded-md p-1',
               copied && 'bg-selection',
               'hover:bg-selection transition',
               className
@@ -163,7 +163,7 @@ export function CodeBlockControls({ content }: { content: string }) {
           <button
             tabIndex={0}
             onClick={toggleWrap}
-            className={cn('border rounded-md p-1', 'hover:bg-selection transition')}
+            className={cn('cursor-pointer border rounded-md p-1', 'hover:bg-selection transition')}
             aria-label={isWrapped ? 'Disable word wrap' : 'Enable word wrap'}
           >
             {isWrapped ? (
diff --git a/apps/docs/features/ui/PromptPanel.tsx b/apps/docs/features/ui/PromptPanel.tsx
index 9c3e5d23d53da..56424f6eea8d8 100644
--- a/apps/docs/features/ui/PromptPanel.tsx
+++ b/apps/docs/features/ui/PromptPanel.tsx
@@ -192,7 +192,7 @@ function CopyButton({ label, value }: { label: string; value: string }) {
           setCopied(true)
         })
       }}
-      className="rounded-sm p-1.5 text-foreground-muted transition-colors hover:bg-surface-200 hover:text-foreground focus-ring"
+      className="cursor-pointer rounded-sm p-1.5 text-foreground-muted transition-colors hover:bg-surface-200 hover:text-foreground focus-ring"
       aria-label={copied ? `${label} copied` : `Copy ${label}`}
       title={copied ? 'Copied' : 'Copy to clipboard'}
     >
diff --git a/packages/ui/src/components/shadcn/ui/tabs.tsx b/packages/ui/src/components/shadcn/ui/tabs.tsx
index 5b7667990e9fc..f6b4b0a4b3686 100644
--- a/packages/ui/src/components/shadcn/ui/tabs.tsx
+++ b/packages/ui/src/components/shadcn/ui/tabs.tsx
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap py-1.5 text-sm transition-colors focus-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:shadow-xs text-foreground-lighter hover:text-foreground data-[state=active]:border-foreground border-b-2 border-transparent',
+      'inline-flex cursor-pointer items-center justify-center whitespace-nowrap py-1.5 text-sm transition-colors focus-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:shadow-xs text-foreground-lighter hover:text-foreground data-[state=active]:border-foreground border-b-2 border-transparent',
       'group',
       className
     )}

From 29f11b85e7a005111d554d1956dc0d5830a99af9 Mon Sep 17 00:00:00 2001
From: kanad <github@kanad.dev>
Date: Wed, 29 Jul 2026 17:42:32 -0700
Subject: [PATCH 2/3] docs(cli): make getting-started platform tabs consistent
 (#48426)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What kind of change does this PR introduce?

Docs consistency fix for the [CLI getting-started
guide](https://supabase.com/docs/guides/local-development/cli/getting-started).

The page has three install-channel tab groups (Installing, Beta channel,
Updating the Supabase CLI). The first two order tabs **npm → macOS →
Windows → Linux** with npm as the default, but the Updating section put
npm last and defaulted to macOS. This PR aligns all three, plus two
related consistency fixes found while auditing the CLI-focused pages:

- Move the npm tab first in the Updating section and set
`defaultActiveId="npm"`, matching the other two groups
- Rename the Updating section's `#### Linux package manager` heading to
`#### Linux packages` to match the Installing and Beta channel sections
(in-page `#linux-packages` links target the first occurrence in
Installing, so they are unaffected)
- Add `queryGroup="platform"` to all three groups so the selected
platform stays in sync across them and persists in the URL — the same
mechanism the page's Access services tabs (`access-method`) and the
local-development overview (`package-manager`) already use

Other CLI-focused pages were checked (`cli/testing-and-linting`,
`cli-workflows`, `guides/cli`, `local-development` overview) and have no
similar tab inconsistencies.

Noticed in passing, intentionally not changed here: the Updating npm tab
suggests `npm update supabase@beta --save-dev` for the beta channel, but
`npm update` doesn't accept a dist-tag — switching to beta should be
`npm install supabase@beta --save-dev`. Left for a follow-up since it's
a content bug, not an ordering issue.

Validation: `pnpm lint:mdx` and Prettier pass with no findings on this
file.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Documentation**
* Improved the Supabase CLI installation and update guide with clearer
platform-specific tab behavior.
* Refined the “Updating the Supabase CLI” tabs to default to npm, and
added stable/beta npm update instructions in the npm panel.
* Updated Linux update wording and re-formatted the step list under the
Linux packages tab for better readability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 .../local-development/cli/getting-started.mdx | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/apps/docs/content/guides/local-development/cli/getting-started.mdx b/apps/docs/content/guides/local-development/cli/getting-started.mdx
index 18e38612983fe..5ec58c4015bde 100644
--- a/apps/docs/content/guides/local-development/cli/getting-started.mdx
+++ b/apps/docs/content/guides/local-development/cli/getting-started.mdx
@@ -29,6 +29,7 @@ The rest of this page writes examples as `supabase <command>`; translate them to
   size="small"
   type="underlined"
   defaultActiveId="npm"
+  queryGroup="platform"
 >
 <TabPanel id="npm" label="npm">
 
@@ -104,6 +105,7 @@ Pre-release CLI builds ship from the development branch (`X.Y.Z-beta.N` versions
   size="small"
   type="underlined"
   defaultActiveId="npm"
+  queryGroup="platform"
 >
 <TabPanel id="npm" label="npm">
 
@@ -160,8 +162,24 @@ When a new [version](https://github.com/supabase/cli/releases) is released, you
   scrollable
   size="small"
   type="underlined"
-  defaultActiveId="macos"
+  defaultActiveId="npm"
+  queryGroup="platform"
 >
+<TabPanel id="npm" label="npm">
+
+If you have installed the CLI as dev dependency via [npm](https://www.npmjs.com/package/supabase), you can update it with:
+
+```sh
+npm update supabase --save-dev
+```
+
+Beta channel (`supabase@beta`):
+
+```sh
+npm update supabase@beta --save-dev
+```
+
+</TabPanel>
 <TabPanel id="macos" label="macOS">
 
 ```sh
@@ -202,7 +220,7 @@ Beta channel:
 brew upgrade supabase-beta
 ```
 
-#### Linux package manager
+#### Linux packages
 
 1. Download the latest package from the [Supabase CLI releases page](https://github.com/supabase/cli/releases/latest)
 2. Install the package using the same commands as the [initial installation](#linux-packages):
@@ -210,21 +228,6 @@ brew upgrade supabase-beta
    - `sudo dpkg -i <...>.deb`
    - `sudo rpm -i <...>.rpm`
 
-</TabPanel>
-<TabPanel id="npm" label="npm">
-
-If you have installed the CLI as dev dependency via [npm](https://www.npmjs.com/package/supabase), you can update it with:
-
-```sh
-npm update supabase --save-dev
-```
-
-Beta channel (`supabase@beta`):
-
-```sh
-npm update supabase@beta --save-dev
-```
-
 </TabPanel>
 </Tabs>
 

From fcfb0f022282a7967ab1b129ea365b4ae0438978 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 30 Jul 2026 11:45:40 +0800
Subject: [PATCH 3/3] Refactor all usage of form.watch to either useWatch or
 subscribe (#48436)

## Context

Replaces all usage of `form.watch()` to use `useWatch` instead + follows
the "name what you watch" convention as specified in the react-hook-form
skills.

There's also a small refactor in `SmtpForm.tsx` which removes the
unnecessary use of a `useState` to track if SMTP is enabled or not

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Improvements**
* Updated many Studio forms to watch specific fields more precisely,
improving live UI updates for previews, warnings, conditional sections,
and validation messages.
* Enhanced responsiveness across settings, authentication, billing,
storage, integrations, and support flows while keeping save/update
behavior the same.
* **Refined Experiences**
* Improved the analytics table creation flow with tighter, enum-based
column type validation and structured, type-specific column options.
* **Preserved Behavior**
* Maintained existing permission checks, submission flows, and
account-management workflows.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../Scoped/NewScopedTokenSheet.tsx            |   8 +-
 .../Preferences/DeleteAccountButton.tsx       |   4 +-
 .../interfaces/Advisors/CreateRuleSheet.tsx   |   9 +-
 .../interfaces/Auth/AuditLogsForm.tsx         |   6 +-
 .../interfaces/Auth/BasicAuthSettingsForm.tsx |  41 ++--
 .../Auth/EmailTemplates/TemplateEditor.tsx    |   4 +-
 .../interfaces/Auth/Hooks/CreateHookSheet.tsx |   7 +-
 .../MfaAuthSettingsForm.tsx                   |   6 +-
 .../OAuthApps/CreateOrUpdateOAuthAppSheet.tsx |   6 +-
 .../OAuthApps/OAuthServerSettingsForm.tsx     |  20 +-
 .../Auth/PerformanceSettingsForm.tsx          |   4 +-
 .../interfaces/Auth/RateLimits/RateLimits.tsx |  21 +-
 .../Auth/RedirectUrls/AddNewURLModal.tsx      |   4 +-
 .../interfaces/Auth/SmtpForm/SmtpForm.tsx     |  33 ++-
 .../CreateAwsCognitoAuthDialog.tsx            |   4 +-
 .../interfaces/Auth/Users/BanUserModal.tsx    |   4 +-
 .../NewPaymentMethodElement.tsx               |   7 +-
 .../BranchManagement/CreateBranchModal.tsx    |   7 +-
 .../Extensions/EnableExtensionModal.tsx       |   4 +-
 .../Functions/CreateFunction/index.tsx        |   4 +-
 .../Policies/PolicyEditorPanel/index.tsx      |   7 +-
 .../AnalyticsBucket/Fields.tsx                |   7 +-
 .../DestinationForm/DuckLake/Fields.tsx       |  15 +-
 .../DestinationForm/PublicationSelection.tsx  |   4 +-
 .../DestinationForm/TableCopySelection.tsx    |   7 +-
 .../DestinationForm/index.tsx                 |   4 +-
 .../Database/Triggers/TriggerSheet.tsx        |   7 +-
 .../DiskManagement/DiskManagementForm.tsx     |   8 +-
 .../DiskManagement/fields/AutoScaleFields.tsx |   7 +-
 .../fields/ComputeSizeField.tsx               |   4 +-
 .../DiskManagement/fields/IOPSField.tsx       |  10 +-
 .../DiskManagement/fields/ThroughputField.tsx |  10 +-
 .../ui/ComputeSizeRecommendationSection.tsx   |   9 +-
 .../DiskManagement/ui/DiskSpaceBar.tsx        |   6 +-
 .../ui/DiskTypeRecommendationSection.tsx      |  10 +-
 .../EdgeFunctionTesterSheet.tsx               |   4 +-
 .../CronJobScheduleSection.tsx                |   4 +-
 .../CronJobs/SqlFunctionSection.tsx           |   4 +-
 .../PartitionConfigFields.tsx                 |   4 +-
 .../Integrations/Queues/QueuesSettings.tsx    |   4 +-
 .../Wrappers/CreateIcebergWrapperSheet.tsx    |  28 +--
 .../LogDrainDestinationSheetForm.tsx          |   6 +-
 .../BillingCustomerDataForm.tsx               |   4 +-
 .../BillingSettings/BillingEmail.tsx          |   7 +-
 .../BillingSettings/CreditTopUp.tsx           |   4 +-
 .../NewAwsMarketplaceOrgForm.tsx              |   4 +-
 .../Organization/NewOrg/NewOrgForm.tsx        |  12 +-
 .../SSO/JoinOrganizationOnSignup.tsx          |   4 +-
 .../interfaces/Organization/SSO/SSOConfig.tsx |  10 +-
 .../TeamSettings/InviteMemberButton.tsx       |   7 +-
 .../PlatformWebhooksEndpointSheet.tsx         |   6 +-
 .../PostgresVersionSelector.tsx               |   7 +-
 .../interfaces/Realtime/RealtimeSettings.tsx  |   7 +-
 .../Settings/API/DataApiEnableSwitchForm.tsx  |   4 +-
 .../ConnectionPooling/ConnectionPooling.tsx   |   4 +-
 .../JitDbAccessRuleSheet.tsx                  |   4 +-
 .../CustomDomainsConfigureHostname.tsx        |   4 +-
 .../GitHubIntegrationConnectionForm.tsx       |  17 +-
 .../GitHubRepositoryField.tsx                 |   4 +-
 .../interfaces/SignIn/ResetPasswordForm.tsx   |   6 +-
 .../interfaces/SignIn/SignInMfaForm.tsx       |   4 +-
 .../interfaces/SignIn/SignUpForm.tsx          |   4 +-
 .../CreateTable/CreateTableSheet.constants.ts |  11 +-
 .../CreateTable/CreateTableSheet.schema.ts    |   4 +-
 .../CreateTable/CreateTableSheet.tsx          | 215 ++++++++++--------
 .../interfaces/Storage/CreateBucketModal.tsx  |   6 +-
 .../interfaces/Storage/EditBucketModal.tsx    |   6 +-
 .../StorageSettings/StorageSettings.tsx       |   4 +-
 .../Support/LinkSupportTicketForm.tsx         |   7 +-
 .../interfaces/Support/SupportFormV2.tsx      |   6 +-
 .../interfaces/Support/SupportFormV3.tsx      |   6 +-
 71 files changed, 434 insertions(+), 326 deletions(-)

diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
index 0288f218f3342..f6e775cc08a96 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { useCallback, useState } from 'react'
-import { useForm, type SubmitHandler } from 'react-hook-form'
+import { useForm, useWatch, type SubmitHandler } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -70,9 +70,9 @@ export const NewScopedTokenSheet = ({
   const track = useTrack()
   const { mutate: createAccessToken, isPending } = useAccessTokenCreateMutation()
 
-  const resourceAccess = form.watch('resourceAccess')
-  const expiresAt = form.watch('expiresAt')
-  const permissionRows = form.watch('permissionRows') || []
+  const resourceAccess = useWatch({ control: form.control, name: 'resourceAccess' })
+  const expiresAt = useWatch({ control: form.control, name: 'expiresAt' })
+  const permissionRows = useWatch({ control: form.control, name: 'permissionRows' }) || []
 
   const onSubmit: SubmitHandler<TokenFormValues> = async (values) => {
     if (!permissionRows || permissionRows.length === 0) {
diff --git a/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx b/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx
index d421f5ffc2d32..c7c8d4d5d79b1 100644
--- a/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { SupportCategories } from '@supabase/shared-types/out/constants'
 import { LOCAL_STORAGE_KEYS, safeLocalStorage } from 'common'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -63,7 +63,7 @@ export const DeleteAccountButton = () => {
     resolver: zodResolver(FormSchema),
     defaultValues: { account: '' },
   })
-  const { account } = form.watch()
+  const account = useWatch({ control: form.control, name: 'account' })
 
   const { mutate: submitSupportTicket, isPending } = useSendSupportTicketMutation({
     onSuccess: () => {
diff --git a/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx b/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx
index f188769bf9fa1..76e20fc13da23 100644
--- a/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx
+++ b/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useParams } from 'common'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -99,7 +99,10 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
     defaultValues,
   })
 
-  const { lint_name, assigned_to, is_disabled } = form.watch()
+  const [lint_name, assigned_to, is_disabled] = useWatch({
+    control: form.control,
+    name: ['lint_name', 'assigned_to', 'is_disabled'],
+  })
 
   const onSubmit: SubmitHandler<z.infer<typeof FormSchema>> = async (values) => {
     if (!projectRef) return console.error('Project ref is required')
@@ -200,7 +203,7 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
                   <Admonition showIcon={false} type="default">
                     {generateRuleDescription({
                       name: lint_name,
-                      disabled: is_disabled,
+                      disabled: is_disabled ?? defaultValues.is_disabled,
                       member: members.find((x) => x.gotrue_id === assigned_to),
                     })}
                   </Admonition>
diff --git a/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx b/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx
index 94c27c95537d2..d56eee4efd6d9 100644
--- a/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Switch } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
@@ -69,7 +69,9 @@ export const AuditLogsForm = () => {
     defaultValues: { AUDIT_LOG_DISABLE_POSTGRES: false },
   })
   const { isDirty } = form.formState
-  const { AUDIT_LOG_DISABLE_POSTGRES: formValueDisablePostgres } = form.watch()
+  const { AUDIT_LOG_DISABLE_POSTGRES: formValueDisablePostgres } = useWatch({
+    control: form.control,
+  })
   const currentlyDisabled = authConfig?.AUDIT_LOG_DISABLE_POSTGRES ?? false
   const isDisabling = !currentlyDisabled && formValueDisablePostgres
 
diff --git a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx
index f470b23d02c46..4f81a929d4745 100644
--- a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'common'
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Alert,
@@ -82,6 +82,10 @@ export const BasicAuthSettingsForm = () => {
     },
   })
   const { isDirty } = form.formState
+  const externalAnonymousUsersEnabled = useWatch({
+    control: form.control,
+    name: 'EXTERNAL_ANONYMOUS_USERS_ENABLED',
+  })
 
   useEffect(() => {
     if (authConfig) {
@@ -250,7 +254,7 @@ export const BasicAuthSettingsForm = () => {
                     )}
                   />
 
-                  {form.watch('EXTERNAL_ANONYMOUS_USERS_ENABLED') && (
+                  {externalAnonymousUsersEnabled && (
                     <Alert
                       className="flex w-full items-center justify-between mt-4"
                       variant="warning"
@@ -291,23 +295,22 @@ export const BasicAuthSettingsForm = () => {
                     </Alert>
                   )}
 
-                  {!authConfig?.SECURITY_CAPTCHA_ENABLED &&
-                    form.watch('EXTERNAL_ANONYMOUS_USERS_ENABLED') && (
-                      <Alert className="mt-4">
-                        <WarningIcon />
-                        <AlertTitle>
-                          We highly recommend{' '}
-                          <InlineLink href={`/project/${projectRef}/auth/protection`}>
-                            enabling captcha
-                          </InlineLink>{' '}
-                          for anonymous sign-ins
-                        </AlertTitle>
-                        <AlertDescription>
-                          This will prevent potential abuse on sign-ins which may bloat your
-                          database and incur costs for monthly active users (MAU)
-                        </AlertDescription>
-                      </Alert>
-                    )}
+                  {!authConfig?.SECURITY_CAPTCHA_ENABLED && externalAnonymousUsersEnabled && (
+                    <Alert className="mt-4">
+                      <WarningIcon />
+                      <AlertTitle>
+                        We highly recommend{' '}
+                        <InlineLink href={`/project/${projectRef}/auth/protection`}>
+                          enabling captcha
+                        </InlineLink>{' '}
+                        for anonymous sign-ins
+                      </AlertTitle>
+                      <AlertDescription>
+                        This will prevent potential abuse on sign-ins which may bloat your database
+                        and incur costs for monthly active users (MAU)
+                      </AlertDescription>
+                    </Alert>
+                  )}
                 </CardContent>
                 <CardContent>
                   <FormField
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
index e3eeeb8abb2b0..a8a2da6979f31 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import type { editor } from 'monaco-editor'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import ReactMarkdown from 'react-markdown'
 import { toast } from 'sonner'
 import {
@@ -199,7 +199,7 @@ export const TemplateEditor = ({ template, isReadOnly = false }: TemplateEditorP
   }
 
   // Check if form values have changed
-  const formValues = form.watch()
+  const formValues = useWatch({ control: form.control })
   const baselineValues = INITIAL_VALUES
   const baselineBodyValue = (authConfig && authConfig[messageSlug]) ?? ''
   const hasCustomTemplate =
diff --git a/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx b/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
index 4495b281c8c91..aff0fed04211e 100644
--- a/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
@@ -8,7 +8,7 @@ import {
 import { useParams } from 'common'
 import randomBytes from 'randombytes'
 import { useEffect, useMemo } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -167,7 +167,10 @@ export const CreateHookSheet = ({
   })
 
   const isDirty = form.formState.isDirty
-  const { postgresValues, hookType, selectedType, enabled } = form.watch()
+  const [postgresValues, hookType, selectedType, enabled] = useWatch({
+    control: form.control,
+    name: ['postgresValues', 'hookType', 'selectedType', 'enabled'],
+  })
   const {
     confirmOnClose,
     handleOpenChange,
diff --git a/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx
index 1bcc5c588aa28..6b052ea6d88b0 100644
--- a/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { useEffect, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Alert,
@@ -170,6 +170,7 @@ export const MfaAuthSettingsForm = () => {
     },
   })
   const { reset: resetPhoneForm } = phoneForm
+  const mfaPhoneValue = useWatch({ control: phoneForm.control, name: 'MFA_PHONE' })
 
   const securityForm = useForm<SecurityFormValues>({
     resolver: zodResolver(securitySchema),
@@ -329,8 +330,7 @@ export const MfaAuthSettingsForm = () => {
     )
   }
 
-  const phoneMFAIsEnabled =
-    phoneForm.watch('MFA_PHONE') === 'Enabled' || phoneForm.watch('MFA_PHONE') === 'Verify Enabled'
+  const phoneMFAIsEnabled = mfaPhoneValue === 'Enabled' || mfaPhoneValue === 'Verify Enabled'
   const hasUpgradedPhoneMFA =
     authConfig && !authConfig.MFA_PHONE_VERIFY_ENABLED && phoneMFAIsEnabled
 
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx
index a44a80a8d7c30..2e506ce920568 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx
@@ -8,7 +8,7 @@ import { useParams } from 'common'
 import { Storage } from 'icons'
 import { ImageOff, Trash2, X } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -111,6 +111,8 @@ export const CreateOrUpdateOAuthAppSheet = ({
     defaultValues: initialValues,
   })
 
+  const clientType = useWatch({ control: form.control, name: 'client_type' })
+
   const { hostEndpoint: clientEndpoint } = useProjectApiUrl({ projectRef })
 
   const { mutate: createOAuthApp, isPending: isCreating } = useOAuthServerAppCreateMutation({
@@ -481,7 +483,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
                   )}
                 />
 
-                {form.watch('client_type') === 'confidential' && (
+                {clientType === 'confidential' && (
                   <FormField
                     control={form.control}
                     name="token_endpoint_auth_method"
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
index bb6c43430e32f..e296531688de6 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -187,6 +187,12 @@ export const OAuthServerSettingsForm = () => {
     setShowDisableOAuthServerConfirmation(false)
   }
 
+  const oauthServerEnabled = useWatch({ control: form.control, name: 'OAUTH_SERVER_ENABLED' })
+  const authorizationPath = useWatch({
+    control: form.control,
+    name: 'OAUTH_SERVER_AUTHORIZATION_PATH',
+  })
+
   if (isPermissionsLoaded && !canReadConfig) {
     return <NoPermission resourceText="view OAuth server settings" />
   }
@@ -234,7 +240,7 @@ export const OAuthServerSettingsForm = () => {
                     )}
                   />
                 </CardContent>
-                {form.watch('OAUTH_SERVER_ENABLED') && (
+                {oauthServerEnabled && (
                   <>
                     <CardContent>
                       <FormItemLayout
@@ -279,9 +285,11 @@ export const OAuthServerSettingsForm = () => {
                       />
                       {(() => {
                         const siteUrl = authConfig?.SITE_URL?.trim()
-                        const authorizationPath =
-                          form.watch('OAUTH_SERVER_AUTHORIZATION_PATH')?.trim() || '/oauth/consent'
-                        const authorizationUrl = siteUrl ? `${siteUrl}${authorizationPath}` : ''
+                        const resolvedAuthorizationPath =
+                          authorizationPath?.trim() || '/oauth/consent'
+                        const authorizationUrl = siteUrl
+                          ? `${siteUrl}${resolvedAuthorizationPath}`
+                          : ''
 
                         return (
                           <Admonition
@@ -362,7 +370,7 @@ export const OAuthServerSettingsForm = () => {
           </Form>
         </PageSectionContent>
       </PageSection>
-      {isSuccess && authConfig?.OAUTH_SERVER_ENABLED && form.watch('OAUTH_SERVER_ENABLED') && (
+      {isSuccess && authConfig?.OAUTH_SERVER_ENABLED && oauthServerEnabled && (
         <OAuthEndpointsTable isLoading={isPending} />
       )}
 
diff --git a/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx b/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
index 9f4982269d27f..cf8bf6df0a210 100644
--- a/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -112,7 +112,7 @@ export const PerformanceSettingsForm = () => {
     },
   })
 
-  const chosenUnit = databaseForm.watch('DB_MAX_POOL_SIZE_UNIT')
+  const chosenUnit = useWatch({ control: databaseForm.control, name: 'DB_MAX_POOL_SIZE_UNIT' })
 
   const onSubmitRequestDurationForm = (values: any) => {
     if (!project?.ref) return console.error('Project ref is required')
diff --git a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
index ba2dba4f67686..f19337225165b 100644
--- a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
+++ b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import Link from 'next/link'
 import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -147,6 +147,13 @@ export const RateLimits = () => {
     },
   })
 
+  const rateLimitTokenRefresh = useWatch({
+    control: rateLimitForm.control,
+    name: 'RATE_LIMIT_TOKEN_REFRESH',
+  })
+  const rateLimitVerify = useWatch({ control: rateLimitForm.control, name: 'RATE_LIMIT_VERIFY' })
+  const rateLimitOtp = useWatch({ control: rateLimitForm.control, name: 'RATE_LIMIT_OTP' })
+
   const onSubmitRateLimitForm = (data: z.infer<typeof RateLimitFormSchema>) => {
     if (!projectRef) return console.error('Project ref is required')
 
@@ -390,9 +397,9 @@ export const RateLimits = () => {
                             </TooltipContent>
                           )}
                         </Tooltip>
-                        {rateLimitForm.watch('RATE_LIMIT_TOKEN_REFRESH') > 0 && (
+                        {rateLimitTokenRefresh > 0 && (
                           <p className="text-foreground-lighter text-sm mt-2">
-                            {rateLimitForm.watch('RATE_LIMIT_TOKEN_REFRESH') * 12} requests per hour
+                            {rateLimitTokenRefresh * 12} requests per hour
                           </p>
                         )}
                       </FormItemLayout>
@@ -438,9 +445,9 @@ export const RateLimits = () => {
                             </TooltipContent>
                           )}
                         </Tooltip>
-                        {rateLimitForm.watch('RATE_LIMIT_VERIFY') > 0 && (
+                        {rateLimitVerify > 0 && (
                           <p className="text-foreground-lighter text-sm mt-2">
-                            {rateLimitForm.watch('RATE_LIMIT_VERIFY') * 12} requests per hour
+                            {rateLimitVerify * 12} requests per hour
                           </p>
                         )}
                       </FormItemLayout>
@@ -533,9 +540,9 @@ export const RateLimits = () => {
                             </TooltipContent>
                           )}
                         </Tooltip>
-                        {rateLimitForm.watch('RATE_LIMIT_OTP') > 0 && (
+                        {rateLimitOtp > 0 && (
                           <p className="text-foreground-lighter text-sm mt-2">
-                            {rateLimitForm.watch('RATE_LIMIT_OTP') * 12} requests per hour
+                            {rateLimitOtp * 12} requests per hour
                           </p>
                         )}
                       </FormItemLayout>
diff --git a/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx b/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx
index 7e7cffa8b6cf0..a13134d3d2b76 100644
--- a/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx
+++ b/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Label } from '@ui/components/shadcn/ui/label'
 import { useParams } from 'common'
 import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -89,7 +89,7 @@ export const AddNewURLModal = ({ visible, allowList, onClose }: AddNewURLModalPr
     resolver: zodResolver(formSchema),
     defaultValues: initialValues,
   })
-  const urls = form.watch('urls')
+  const urls = useWatch({ control: form.control, name: 'urls' })
 
   const onSubmit = (data: z.infer<typeof formSchema>) => {
     const payload = parseRedirectUrls(
diff --git a/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx b/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
index 997cec88e847d..b3827866156ae 100644
--- a/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
+++ b/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { useEffect, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -100,13 +100,17 @@ type SmtpFormValues = z.infer<typeof smtpSchema>
 
 export const SmtpForm = () => {
   const { ref: projectRef } = useParams()
-  const { data: authConfig, error: authConfigError, isError } = useAuthConfigQuery({ projectRef })
+  const {
+    data: authConfig,
+    error: authConfigError,
+    isError,
+    isSuccess,
+  } = useAuthConfigQuery({ projectRef })
   const { data: selectedProject } = useSelectedProjectQuery()
 
   const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation()
   const { mutateAsync: resetAuthTemplate } = useAuthTemplateResetMutation()
 
-  const [enableSmtp, setEnableSmtp] = useState(false)
   const [showDisableConfirmation, setShowDisableConfirmation] = useState(false)
   const [pendingValues, setPendingValues] = useState<SmtpFormValues | null>(null)
 
@@ -150,6 +154,8 @@ export const SmtpForm = () => {
   })
 
   const { isDirty } = form.formState
+  const smtpHost = useWatch({ control: form.control, name: 'SMTP_HOST' })
+  const enableSmtp = useWatch({ control: form.control, name: 'ENABLE_SMTP' })
 
   const doUpdate = ({
     values,
@@ -235,27 +241,16 @@ export const SmtpForm = () => {
     })
   }
 
-  // Update form values when auth config is loaded
   useEffect(() => {
-    if (authConfig) {
+    if (isSuccess) {
       const formValues = generateFormValues(authConfig)
       form.reset({
         ...formValues,
         ENABLE_SMTP: isSmtpEnabled(authConfig),
       } as SmtpFormValues)
-      setEnableSmtp(isSmtpEnabled(authConfig))
     }
-  }, [authConfig, form])
-
-  // Update enableSmtp state when the form field changes
-  useEffect(() => {
-    const subscription = form.watch((value, { name }) => {
-      if (name === 'ENABLE_SMTP') {
-        setEnableSmtp(value.ENABLE_SMTP as boolean)
-      }
-    })
-    return () => subscription.unsubscribe()
-  }, [form])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSuccess, form])
 
   if (isError) {
     return (
@@ -305,6 +300,7 @@ export const SmtpForm = () => {
                     >
                       <FormControl>
                         <Switch
+                          aria-label="Toggle SMTP"
                           checked={field.value}
                           onCheckedChange={field.onChange}
                           disabled={!canUpdateConfig}
@@ -395,7 +391,7 @@ export const SmtpForm = () => {
                           )}
                         />
 
-                        {form.watch('SMTP_HOST')?.endsWith('.gmail.com') && (
+                        {smtpHost?.endsWith('.gmail.com') && (
                           <Admonition
                             type="warning"
                             title="Check your SMTP provider"
@@ -523,7 +519,6 @@ export const SmtpForm = () => {
                       variant="default"
                       onClick={() => {
                         form.reset()
-                        setEnableSmtp(isSmtpEnabled(authConfig))
                       }}
                     >
                       Cancel
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx
index d8b184185af08..47fb516c3101c 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useParams } from 'common'
 import { Trash } from 'lucide-react'
 import { useEffect } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -90,7 +90,7 @@ export const CreateAwsCognitoAuthIntegrationDialog = ({
     })
   }
 
-  const awsRegion = form.watch('awsRegion')
+  const awsRegion = useWatch({ control: form.control, name: 'awsRegion' })
 
   return (
     <Dialog open={visible} onOpenChange={() => onClose()}>
diff --git a/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx b/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx
index cc928dff45a30..ddc0b42d28a46 100644
--- a/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useParams } from 'common'
 import dayjs from 'dayjs'
 import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -61,7 +61,7 @@ export const BanUserModal = ({ visible, user, onClose }: BanUserModalProps) => {
     defaultValues,
   })
 
-  const { value, unit } = form.watch()
+  const [value, unit] = useWatch({ control: form.control, name: ['value', 'unit'] })
   const bannedUntil = dayjs().add(Number(value), unit).format('DD MMM YYYY HH:mm (ZZ)')
 
   const onSubmit = (data: FormType) => {
diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
index cd4037b16a5fd..c2b2e72f3c342 100644
--- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
@@ -14,7 +14,7 @@ import {
 import { Form } from '@ui/components/shadcn/ui/form'
 import { Check, ChevronsUpDown, HelpCircle } from 'lucide-react'
 import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -140,7 +140,10 @@ export const NewPaymentMethodElement = forwardRef(
       form.setValue('tax_id_name', name)
     }
 
-    const { tax_id_name, tax_id_value: rawTaxIdValue } = form.watch()
+    const [tax_id_name, rawTaxIdValue] = useWatch({
+      control: form.control,
+      name: ['tax_id_name', 'tax_id_value'],
+    })
     const taxIdValue = rawTaxIdValue?.trim() ?? ''
     const selectedTaxId = TAX_IDS.find((option) => option.name === tax_id_name)
 
diff --git a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
index 31a46cc055105..1f50e17d6d6e7 100644
--- a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
@@ -8,7 +8,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Badge,
@@ -112,7 +112,10 @@ export const CreateBranchModal = () => {
     defaultValues: { branchName: '', gitBranchName: '', withData: false },
   })
 
-  const { withData, gitBranchName } = form.watch()
+  const [withData, gitBranchName] = useWatch({
+    control: form.control,
+    name: ['withData', 'gitBranchName'],
+  })
   const debouncedGitBranchName = useDebounce(gitBranchName, 500)
 
   const {
diff --git a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
index 3a142bfdb1760..b16f953cf4502 100644
--- a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
+++ b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useMemo } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Badge,
@@ -106,7 +106,7 @@ export const EnableExtensionModal = ({
     resolver: zodResolver(FormSchema),
     defaultValues,
   })
-  const { schema } = form.watch()
+  const schema = useWatch({ control: form.control, name: 'schema' })
 
   const onSubmit = async (values: z.infer<typeof FormSchema>) => {
     if (project === undefined) return console.error('Project is required')
diff --git a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
index c40a04a07e036..ba9e7d8b7fd0f 100644
--- a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
@@ -3,7 +3,7 @@ import { acceptUntrustedSql, untrustedSql } from '@supabase/pg-meta/src/pg-forma
 import { isEmpty, isNull, keyBy, mapValues, partition } from 'lodash'
 import { Plus, Trash } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
-import { SubmitHandler, useFieldArray, useForm } from 'react-hook-form'
+import { SubmitHandler, useFieldArray, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -91,7 +91,7 @@ export const CreateFunction = ({
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
   })
-  const { type, language } = form.watch()
+  const [type, language] = useWatch({ control: form.control, name: ['type', 'language'] })
 
   const { confirmOnClose, handleOpenChange, modalProps } = useConfirmOnClose({
     checkIsDirty: () => form.formState.isDirty,
diff --git a/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/index.tsx b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/index.tsx
index 4e59521d12b8c..e24db3b43745e 100644
--- a/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/index.tsx
+++ b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/index.tsx
@@ -14,7 +14,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import { useParams } from 'common'
 import { isEqual } from 'lodash'
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -130,7 +130,10 @@ export const PolicyEditorPanel = memo(function ({
     defaultValues,
   })
 
-  const { name, table, behavior, command, roles } = form.watch()
+  const [name, table, behavior, command, roles] = useWatch({
+    control: form.control,
+    name: ['name', 'table', 'behavior', 'command', 'roles'],
+  })
   const supportWithCheck = ['update', 'all'].includes(command)
   const isRenamingPolicy = selectedPolicy !== undefined && name !== selectedPolicy.name
 
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/Fields.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/Fields.tsx
index dff62c342a4b4..4c66ffe335275 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/Fields.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/Fields.tsx
@@ -1,7 +1,7 @@
 import { useParams } from 'common'
 import { Eye, EyeOff, Loader2 } from 'lucide-react'
 import { useState } from 'react'
-import type { UseFormReturn } from 'react-hook-form'
+import { useWatch, type UseFormReturn } from 'react-hook-form'
 import {
   Button,
   FormControl,
@@ -61,7 +61,10 @@ export const AnalyticsBucketFields = ({
   editMode: boolean
   onSelectNewBucket: () => void
 }) => {
-  const { warehouseName, s3AccessKeyId, namespace } = form.watch()
+  const [warehouseName, s3AccessKeyId, namespace] = useWatch({
+    control: form.control,
+    name: ['warehouseName', 's3AccessKeyId', 'namespace'],
+  })
   const [showCatalogToken, setShowCatalogToken] = useState(false)
   const [showSecretAccessKey, setShowSecretAccessKey] = useState(false)
 
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx
index e124836790115..629633df830ad 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx
@@ -1,6 +1,6 @@
 import { Check, Database, Eye, EyeOff, Loader2, Plus, SlidersHorizontal } from 'lucide-react'
 import { useMemo, useState } from 'react'
-import type { UseFormReturn } from 'react-hook-form'
+import { useWatch, type UseFormReturn } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -108,7 +108,10 @@ const DuckLakeModeSelector = ({
 }
 
 const DuckLakeSupabaseFields = ({ form }: { form: UseFormReturn<DestinationPanelSchemaType> }) => {
-  const { ducklakeStorageProjectRef } = form.watch()
+  const ducklakeStorageProjectRef = useWatch({
+    control: form.control,
+    name: 'ducklakeStorageProjectRef',
+  })
 
   const [showNewBucketDialog, setShowNewBucketDialog] = useState(false)
   const [newBucketName, setNewBucketName] = useState('')
@@ -642,7 +645,8 @@ export const DuckLakeFields = ({
   form: UseFormReturn<DestinationPanelSchemaType>
   editMode: boolean
 }) => {
-  const ducklakeMode = (form.watch('ducklakeMode') ?? DUCKLAKE_MODE_SUPABASE) as DucklakeMode
+  const ducklakeMode = (useWatch({ control: form.control, name: 'ducklakeMode' }) ??
+    DUCKLAKE_MODE_SUPABASE) as DucklakeMode
   // The platform API resolves "Use Supabase" config into a flat catalog URL + provisioned S3
   // credentials before persisting, so an existing destination can only be edited as custom
   // parameters — the original project selections aren't recoverable.
@@ -776,7 +780,10 @@ const BucketSelection = ({
   value: string | undefined
   onChange: (value: string) => void
 }) => {
-  const { ducklakeStorageProjectRef } = form.watch()
+  const ducklakeStorageProjectRef = useWatch({
+    control: form.control,
+    name: 'ducklakeStorageProjectRef',
+  })
 
   const {
     data: bucketsData,
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx
index 912156d765b7a..e0ac6818d71be 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx
@@ -1,6 +1,6 @@
 import { useParams } from 'common'
 import { useMemo } from 'react'
-import type { UseFormReturn } from 'react-hook-form'
+import { useWatch, type UseFormReturn } from 'react-hook-form'
 import { FormControl, FormField } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -20,7 +20,7 @@ export const PublicationSelection = ({
   onSelectNewPublication,
 }: PublicationSelectionProps) => {
   const { ref: projectRef } = useParams()
-  const { publicationName } = form.watch()
+  const publicationName = useWatch({ control: form.control, name: 'publicationName' })
 
   const sourceId = useReplicationSourceId({ projectRef })
 
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/TableCopySelection.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/TableCopySelection.tsx
index 2db3fed60bafc..3aff0d660c37c 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/TableCopySelection.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/TableCopySelection.tsx
@@ -1,6 +1,6 @@
 import { useParams } from 'common'
 import { useMemo } from 'react'
-import type { UseFormReturn } from 'react-hook-form'
+import { useWatch, type UseFormReturn } from 'react-hook-form'
 import { FormControl, FormField, Select, SelectContent, SelectItem, SelectTrigger } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -32,7 +32,10 @@ export const TableCopySelection = ({ form, editMode }: TableCopySelectionProps)
   const { ref: projectRef } = useParams()
   const sourceId = useReplicationSourceId({ projectRef })
 
-  const { publicationName, tableSyncCopyMode, tableSyncCopyTableIds } = form.watch()
+  const [publicationName, tableSyncCopyMode, tableSyncCopyTableIds] = useWatch({
+    control: form.control,
+    name: ['publicationName', 'tableSyncCopyMode', 'tableSyncCopyTableIds'],
+  })
 
   const {
     data: publications = [],
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
index 079ac93f64d7c..69644ce02b035 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'common'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Loader2 } from 'lucide-react'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { AWS_REGIONS } from 'shared-data'
 import { toast } from 'sonner'
 import {
@@ -259,7 +259,7 @@ export const DestinationForm = ({
     defaultValues,
   })
 
-  const { publicationName } = form.watch()
+  const publicationName = useWatch({ control: form.control, name: 'publicationName' })
 
   const publicationNames = useMemo(() => publications?.map((pub) => pub.name) ?? [], [publications])
   const isSelectedPublicationMissing =
diff --git a/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx b/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx
index 8ae2a45bffb9f..edce0bf639924 100644
--- a/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import type { PGTrigger } from '@supabase/pg-meta'
 import { Terminal } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -136,7 +136,10 @@ export const TriggerSheet = ({
     resolver: zodResolver(FormSchema),
     defaultValues,
   })
-  const { function_name, function_schema } = form.watch()
+  const [function_name, function_schema] = useWatch({
+    control: form.control,
+    name: ['function_name', 'function_schema'],
+  })
 
   const { confirmOnClose, handleOpenChange, modalProps } = useConfirmOnClose({
     checkIsDirty: () => form.formState.isDirty,
diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
index e6fb89e3de59c..b019b69a5f76b 100644
--- a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useEffect, useRef, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { CloudProvider } from 'shared-data'
 import { toast } from 'sonner'
 import { Button, cn, Form } from 'ui'
@@ -158,7 +158,7 @@ export function DiskManagementForm({ chartsClassName }: { chartsClassName?: stri
     reValidateMode: 'onChange',
   })
 
-  const { computeSize: modifiedComputeSize } = form.watch()
+  const modifiedComputeSize = useWatch({ control: form.control, name: 'computeSize' })
 
   const isSuccess =
     isAddonsSuccess &&
@@ -195,8 +195,8 @@ export function DiskManagementForm({ chartsClassName }: { chartsClassName?: stri
     !isSpendCapEnabled &&
     RESTRICTED_COMPUTE_FOR_THROUGHPUT_ON_GP3.includes(modifiedComputeSize)
 
-  const watchedTotalSize = form.watch('totalSize') ?? 0
-  const watchedStorageType = form.watch('storageType')
+  const watchedTotalSize = useWatch({ control: form.control, name: 'totalSize' }) ?? 0
+  const watchedStorageType = useWatch({ control: form.control, name: 'storageType' })
   // Minimum disk size where the platform API will accept an IOPS payload (500 IOPS/GB rule).
   const minDiskSizeForCustomIops = calculateDiskSizeRequiredForIopsWithGp3(
     DISK_LIMITS[DiskType.GP3].minIops
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx b/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx
index 6e626f6b2045c..d5651c249dff7 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'common'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import {
   FormControl,
   FormField,
@@ -26,7 +26,10 @@ export const AutoScaleFields = ({ form }: AutoScaleFieldProps) => {
     setValue,
     formState: { errors },
   } = form
-  const { totalSize, growthPercent, maxSizeGb, minIncrementGb } = form.watch()
+  const [totalSize, growthPercent, maxSizeGb, minIncrementGb] = useWatch({
+    control,
+    name: ['totalSize', 'growthPercent', 'maxSizeGb', 'minIncrementGb'],
+  })
 
   const { isError } = useDiskAutoscaleCustomConfigQuery({ projectRef })
 
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
index 8d96b14e7a149..d0568f8dfa4c2 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
@@ -2,7 +2,7 @@ import { SupportCategories } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { CpuIcon, Lock, Microchip } from 'lucide-react'
 import { useMemo } from 'react'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import {
   cn,
   FormField,
@@ -57,7 +57,7 @@ export function ComputeSectionBillingBadge({
   beforePrice,
   afterPrice,
 }: ComputeSectionBillingBadgeProps) {
-  const computeSize = form.watch('computeSize')
+  const computeSize = useWatch({ control: form.control, name: 'computeSize' })
   const { showMicroUpgradeBadge } = useShowMicroUpgradeBadge()
 
   return (
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx
index 5af294822c29c..b315674dec306 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'common'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import {
   Button,
   FormControl,
@@ -27,11 +27,11 @@ type IOPSFieldProps = {
 
 export function IOPSField({ form, disableInput }: IOPSFieldProps) {
   const { ref: projectRef } = useParams()
-  const { control, formState, setValue, trigger, getValues, watch } = form
+  const { control, formState, setValue, trigger, getValues } = form
 
-  const watchedStorageType = watch('storageType')
-  const watchedComputeSize = watch('computeSize')
-  const watchedIOPS = watch('provisionedIOPS') ?? 0
+  const watchedStorageType = useWatch({ control, name: 'storageType' })
+  const watchedComputeSize = useWatch({ control, name: 'computeSize' })
+  const watchedIOPS = useWatch({ control, name: 'provisionedIOPS' }) ?? 0
 
   const { isError } = useDiskAttributesQuery({ projectRef })
 
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx
index 9b07712f8fb88..fe0548e246cbc 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx
@@ -1,7 +1,7 @@
 import { useParams } from 'common'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useEffect } from 'react'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import {
   FormControl,
   FormField,
@@ -29,11 +29,11 @@ type ThroughputFieldProps = {
 export function ThroughputField({ form, disableInput }: ThroughputFieldProps) {
   const { ref: projectRef } = useParams()
 
-  const { control, formState, setValue, getValues, watch } = form
+  const { control, formState, setValue, getValues } = form
 
-  const watchedStorageType = watch('storageType')
-  const watchedTotalSize = watch('totalSize')
-  const watchedComputeSize = watch('computeSize')
+  const watchedStorageType = useWatch({ control, name: 'storageType' })
+  const watchedTotalSize = useWatch({ control, name: 'totalSize' })
+  const watchedComputeSize = useWatch({ control, name: 'computeSize' })
   const throughput_mbps = formState.defaultValues?.throughput
 
   useDiskAttributesQuery({ projectRef })
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx
index 2bd6436943dc1..302830f12a387 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx
@@ -1,6 +1,6 @@
 import { AnimatePresence, motion } from 'framer-motion'
 import { ReactNode } from 'react'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import { COMPUTE_BASELINE_IOPS, COMPUTE_MAX_IOPS } from 'shared-data'
 import { Admonition } from 'ui-patterns/Admonition'
 
@@ -21,9 +21,10 @@ export function ComputeSizeRecommendationSection({
   actions,
   form,
 }: ComputeSizeRecommendationSectionProps) {
-  const { watch } = form
-  const computeSize = watch('computeSize')
-  const iops = watch('provisionedIOPS')
+  const [computeSize, iops] = useWatch({
+    control: form.control,
+    name: ['computeSize', 'provisionedIOPS'],
+  })
 
   const computeSizeRecommendedForIops = calculateComputeSizeRequiredForIops(iops)
   const maxIopsForComputeSize = calculateMaxIopsForComputeSize(computeSize ?? 'ci_micro')
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx
index b5787f9f6574c..8f9bc873187f0 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx
@@ -4,7 +4,7 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { Info } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useMemo } from 'react'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import { Badge, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 import { DiskStorageSchemaType } from '../DiskManagement.schema'
@@ -22,7 +22,7 @@ interface DiskSpaceBarProps {
 export const DiskSpaceBar = ({ form }: DiskSpaceBarProps) => {
   const { ref } = useParams()
   const { resolvedTheme } = useTheme()
-  const { formState, watch } = form
+  const { formState } = form
   const isDarkMode = resolvedTheme?.includes('dark')
   const { data: project } = useSelectedProjectQuery()
 
@@ -55,7 +55,7 @@ export const DiskSpaceBar = ({ form }: DiskSpaceBarProps) => {
   }, [diskUtil, diskBreakdown])
 
   const showNewSize = formState.dirtyFields.totalSize !== undefined && diskBreakdown
-  const newTotalSize = watch('totalSize')
+  const newTotalSize = useWatch({ control: form.control, name: 'totalSize' })
 
   const totalSize = formState.defaultValues?.totalSize || 0
   const usedSizeTotal = Math.round(((diskBreakdownBytes?.totalUsedBytes ?? 0) / GB) * 100) / 100
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx
index 3b8da212df0ae..d78185919f3a3 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx
@@ -1,6 +1,6 @@
 import { AnimatePresence, motion } from 'framer-motion'
 import { ReactNode } from 'react'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import { Admonition } from 'ui-patterns/Admonition'
 
 import { DiskStorageSchemaType } from '../DiskManagement.schema'
@@ -13,10 +13,10 @@ export function DiskTypeRecommendationSection({
   actions?: ReactNode
   form: UseFormReturn<DiskStorageSchemaType>
 }) {
-  const { watch } = form
-
-  const totalSize = watch('totalSize')
-  const storageType = watch('storageType')
+  const [totalSize, storageType] = useWatch({
+    control: form.control,
+    name: ['totalSize', 'storageType'],
+  })
   const isVisible = storageType === DiskType.GP3 && totalSize > DISK_LIMITS[DiskType.GP3].maxStorage
   const io2Option = DISK_TYPE_OPTIONS.find((option) => option.type === DiskType.IO2)
 
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx
index 1a719dc33da15..44280555658ad 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { BookOpen, Loader2, Plus, Send, X } from 'lucide-react'
 import { useState } from 'react'
-import { useFieldArray, useForm } from 'react-hook-form'
+import { useFieldArray, useForm, useWatch } from 'react-hook-form'
 import {
   Badge,
   Button,
@@ -139,7 +139,7 @@ const EdgeFunctionTesterSheetContent = ({ visible, onClose }: EdgeFunctionTester
       queryParams: [{ key: '', value: '' }],
     },
   })
-  const { method } = form.watch()
+  const method = useWatch({ control: form.control, name: 'method' })
 
   const {
     fields: headerFields,
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx
index b7fa1e6b9284d..2d9d4dea79a15 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx
@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion'
 import { useEffect, useState } from 'react'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import {
   Accordion,
   AccordionContent,
@@ -69,7 +69,7 @@ export const CronJobScheduleSection = ({ form, supportsSeconds }: CronJobSchedul
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedValue, useNaturalLanguage])
 
-  const schedule = form.watch('schedule')
+  const schedule = useWatch({ control: form.control, name: 'schedule' })
   const scheduleString = formatScheduleString(schedule)
 
   return (
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx
index a58c636f2e46f..931be8d92ee4c 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx
@@ -1,4 +1,4 @@
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import { FormField, SheetSection } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
@@ -11,7 +11,7 @@ interface SqlFunctionSectionProps {
 }
 
 export const SqlFunctionSection = ({ form }: SqlFunctionSectionProps) => {
-  const schema = form.watch('values.schema')
+  const schema = useWatch({ control: form.control, name: 'values.schema' })
 
   return (
     <SheetSection className="flex flex-col gap-3 2xl:flex-row 2xl:[&>div]:w-full">
diff --git a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PartitionConfigFields.tsx b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PartitionConfigFields.tsx
index 7b1a007860c16..27e76d8e26917 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PartitionConfigFields.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PartitionConfigFields.tsx
@@ -1,4 +1,4 @@
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import {
   FormField,
   InputGroup,
@@ -13,7 +13,7 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { CreateQueueForm } from './CreateQueueSheet.schema'
 
 export function PartitionConfigFields({ form }: { form: UseFormReturn<CreateQueueForm> }) {
-  const queueType = form.watch('values.type')
+  const queueType = useWatch({ control: form.control, name: 'values.type' })
 
   if (queueType !== 'partitioned') return null
 
diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx
index d6f2349c6d094..05abb2f494713 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { QUEUES_SCHEMA } from '@supabase/pg-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import { Button, Form, FormControl, FormField, FormItem, Switch } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
@@ -48,7 +48,7 @@ export const QueuesSettings = () => {
     defaultValues: { enable: false },
   })
   const { formState } = form
-  const { enable } = form.watch()
+  const enable = useWatch({ control: form.control, name: 'enable' })
 
   const { data: queueTables } = useTablesQuery({
     projectRef: project?.ref,
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx
index 93991554b4128..1a908dae33e59 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx
@@ -144,7 +144,7 @@ export const CreateIcebergWrapperSheet = ({
     resolver: zodResolver(formSchema),
     defaultValues: INITIAL_VALUES,
   })
-  const { resetField, formState, setError, watch } = form
+  const { resetField, formState, setError } = form
   const { isDirty, isSubmitting } = formState
 
   useEffect(() => {
@@ -153,21 +153,23 @@ export const CreateIcebergWrapperSheet = ({
 
   const currentTarget = useRef<FormSchema['target']>(INITIAL_VALUES.target)
   useEffect(() => {
-    const subscription = watch((values) => {
-      if (!values.target || values.target === currentTarget.current) return
-      currentTarget.current = values.target
+    return form.subscribe({
+      name: 'target',
+      formState: { values: true },
+      callback: ({ values }) => {
+        if (!values.target || values.target === currentTarget.current) return
+        currentTarget.current = values.target
 
-      const fields = targetFields[values.target]
-      if (!fields) return
+        const fields = targetFields[values.target]
+        if (!fields) return
 
-      wrapperMeta.server.options.forEach((option) => {
-        // @ts-expect-error Can't reconcile with form schema
-        resetField(option.name, { defaultValue: option.defaultValue ?? '' })
-      })
+        wrapperMeta.server.options.forEach((option) => {
+          // @ts-expect-error Can't reconcile with form schema
+          resetField(option.name, { defaultValue: option.defaultValue ?? '' })
+        })
+      },
     })
-
-    return () => subscription.unsubscribe()
-  }, [resetField, watch, wrapperMeta])
+  }, [form, resetField, wrapperMeta])
 
   const onSubmit: SubmitHandler<FormSchema> = async (values) => {
     const foundSchema = schemas?.find((s) => s.name === values.target_schema)
diff --git a/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx b/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
index 4bbcfbdd78a17..88f761879cd2f 100644
--- a/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
+++ b/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { IS_PLATFORM } from 'common'
 import Link from 'next/link'
 import { ReactNode, useEffect, useMemo, useRef } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -393,8 +393,8 @@ export function LogDrainDestinationSheetForm({
     values: formValues,
   })
 
-  const type = form.watch('type')
-  const tls = form.watch('tls')
+  const type = useWatch({ control: form.control, name: 'type' })
+  const tls = useWatch({ control: form.control, name: 'tls' })
 
   useEffect(() => {
     if (mode === 'create' && !open) {
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx
index e992caf60f00e..01190934173d9 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx
@@ -6,7 +6,7 @@ import type {
 } from '@stripe/stripe-js'
 import { Check, ChevronsUpDown, Info, X } from 'lucide-react'
 import { useEffect, useId, useMemo, useRef, useState } from 'react'
-import { UseFormReturn } from 'react-hook-form'
+import { UseFormReturn, useWatch } from 'react-hook-form'
 import {
   Button,
   cn,
@@ -78,7 +78,7 @@ export const BillingCustomerDataForm = ({
     form.setValue('tax_id_value', '', { shouldDirty: true })
   }
 
-  const { tax_id_name } = form.watch()
+  const tax_id_name = useWatch({ control: form.control, name: 'tax_id_name' })
   const selectedTaxId = TAX_IDS.find((option) => option.name === tax_id_name)
 
   const availableTaxIds = useMemo(() => {
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
index 31a0e5566f508..6e3a172b0d4fb 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Form, FormControl, FormField } from '@ui/components/shadcn/ui/form'
 import { useParams } from 'common'
 import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import { FormMessage, Input } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -61,7 +61,10 @@ const BillingEmail = () => {
       additionalBillingEmails: billingCustomer?.additional_emails ?? [],
     },
   })
-  const { additionalBillingEmails } = form.watch()
+  const additionalBillingEmails = useWatch({
+    control: form.control,
+    name: 'additionalBillingEmails',
+  })
   const { errors } = form.formState
   const additionalEmailsError = errors.additionalBillingEmails ?? []
 
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx
index b08a50d3d00d8..d92d9651af283 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx
@@ -8,7 +8,7 @@ import { useDebounce } from '@uidotdev/usehooks'
 import { AlertCircle, Info } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Alert,
@@ -104,7 +104,7 @@ export const CreditTopUp = ({ slug }: { slug: string | undefined }) => {
   const debouncedAddress = useDebounce(billingAddress, 1000)
   const debouncedTaxId = useDebounce(billingTaxId, 1000)
 
-  const watchedAmount = form.watch('amount')
+  const watchedAmount = useWatch({ control: form.control, name: 'amount' })
   const debouncedAmount = useDebounce(watchedAmount, 1000)
   const parsedAmount = Number(debouncedAmount)
   const validAmount =
diff --git a/apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgForm.tsx b/apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgForm.tsx
index b9b232ab63772..1f372319b835a 100644
--- a/apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgForm.tsx
+++ b/apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgForm.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { Form } from 'ui'
 
 import {
@@ -28,7 +28,7 @@ export const NewAwsMarketplaceOrgForm = ({ onSubmit }: Props) => {
     },
   })
 
-  const kind = form.watch('kind')
+  const kind = useWatch({ control: form.control, name: 'kind' })
 
   return (
     <Form {...form}>
diff --git a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx b/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
index 64443884b40cf..f8028027a289b 100644
--- a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
+++ b/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
@@ -9,7 +9,7 @@ import { useTheme } from 'next-themes'
 import { useRouter } from 'next/router'
 import { parseAsBoolean, parseAsString, useQueryStates } from 'nuqs'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -201,8 +201,8 @@ export const NewOrgForm = ({
     setLatestTaxId(taxId)
   }, [])
 
-  const selectedPlan = form.watch('plan')
-  const selectedSpendCap = form.watch('spend_cap')
+  const selectedPlan = useWatch({ control: form.control, name: 'plan' })
+  const selectedSpendCap = useWatch({ control: form.control, name: 'spend_cap' })
 
   useEffect(() => {
     if (selectedPlan === 'FREE' || !setupIntent) {
@@ -445,7 +445,7 @@ export const NewOrgForm = ({
           <div className="divide-y divide-border-muted">
             <OrganizationDetailsFields
               control={form.control}
-              kind={form.watch('kind')}
+              kind={useWatch({ control: form.control, name: 'kind' })}
               renderFieldWrapper={(children, field) => (
                 <Panel.Content key={field}>{children}</Panel.Content>
               )}
@@ -494,7 +494,7 @@ export const NewOrgForm = ({
               </Panel.Content>
             )}
 
-            {form.watch('plan') === 'PRO' && (
+            {selectedPlan === 'PRO' && (
               <>
                 <Panel.Content className="border-b border-panel-border-interior-light dark:border-panel-border-interior-dark">
                   <FormField
@@ -535,7 +535,7 @@ export const NewOrgForm = ({
               </>
             )}
 
-            {setupIntent && form.watch('plan') !== 'FREE' && (
+            {setupIntent && selectedPlan !== 'FREE' && (
               <Panel.Content className="pt-5">
                 <Elements stripe={stripePromise} options={stripeOptionsPaymentMethod}>
                   <NewPaymentMethodElement
diff --git a/apps/studio/components/interfaces/Organization/SSO/JoinOrganizationOnSignup.tsx b/apps/studio/components/interfaces/Organization/SSO/JoinOrganizationOnSignup.tsx
index bf794b9297d27..28848039ddfb4 100644
--- a/apps/studio/components/interfaces/Organization/SSO/JoinOrganizationOnSignup.tsx
+++ b/apps/studio/components/interfaces/Organization/SSO/JoinOrganizationOnSignup.tsx
@@ -1,4 +1,4 @@
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import {
   FormControl,
   FormField,
@@ -19,7 +19,7 @@ export const JoinOrganizationOnSignup = ({
 }: {
   form: ReturnType<typeof useForm<SSOConfigFormSchema>>
 }) => {
-  const joinOrgOnSignup = form.watch('joinOrgOnSignup')
+  const joinOrgOnSignup = useWatch({ control: form.control, name: 'joinOrgOnSignup' })
 
   return (
     <div className="space-y-4">
diff --git a/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx b/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx
index 614282dc5a178..6b0c41936ea9d 100644
--- a/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx
+++ b/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useFlag } from 'common'
 import { Trash } from 'lucide-react'
 import { useEffect, useEffectEvent, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Switch } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
@@ -129,8 +129,8 @@ export const SSOConfig = () => {
     defaultValues,
   })
 
-  const isSSOEnabled = form.watch('enabled')
-  const enableSpInitiated = form.watch('enableSpInitiated')
+  const isSSOEnabled = useWatch({ control: form.control, name: 'enabled' })
+  const enableSpInitiated = useWatch({ control: form.control, name: 'enableSpInitiated' })
 
   const { mutate: createSSOConfig, isPending: isCreating } = useSSOConfigCreateMutation({
     onSuccess: () => {
@@ -314,7 +314,7 @@ export const SSOConfig = () => {
                           )}
                         />
 
-                        {form.watch('enableSpInitiated') && (
+                        {enableSpInitiated && (
                           <Admonition
                             type="note"
                             title="Understanding SSO login flows"
@@ -346,7 +346,7 @@ export const SSOConfig = () => {
                         )}
                       </CardContent>
 
-                      {form.watch('enableSpInitiated') && (
+                      {enableSpInitiated && (
                         <CardContent>
                           <SSODomains form={form} />
                         </CardContent>
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
index aae070a349596..fc5722bc5f0da 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { UserPlus } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -151,7 +151,10 @@ export const InviteMemberButton = () => {
     defaultValues,
   })
 
-  const { applyToOrg, projectRef, email } = form.watch()
+  const [applyToOrg, projectRef, email] = useWatch({
+    control: form.control,
+    name: ['applyToOrg', 'projectRef', 'email'],
+  })
 
   const emailCount = parseEmails(email ?? '').length
 
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx
index 5ba618c8ccfa5..e9791b6b9c75e 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { ChevronDown } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import {
   Accordion,
   AccordionContent,
@@ -196,8 +196,8 @@ export const PlatformWebhooksEndpointSheet = ({
     onClose,
   })
 
-  const subscribeAll = form.watch('subscribeAll')
-  const selectedEventTypes = form.watch('eventTypes')
+  const subscribeAll = useWatch({ control: form.control, name: 'subscribeAll' })
+  const selectedEventTypes = useWatch({ control: form.control, name: 'eventTypes' })
   const groupedEventTypes = useMemo(
     () => buildEventTypeGroups(scope, eventTypes),
     [scope, eventTypes]
diff --git a/apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx
index b8b459649bdc3..1eae5e0d9ff05 100644
--- a/apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { ControllerRenderProps, UseFormReturn } from 'react-hook-form'
+import { ControllerRenderProps, UseFormReturn, useWatch } from 'react-hook-form'
 import type { CloudProvider } from 'shared-data'
 import {
   Badge,
@@ -91,7 +91,10 @@ export const PostgresVersionSelector = ({
       ? (createVersions?.available_versions ?? [])
       : (unpauseVersions?.available_versions ?? [])
   const availableVersions = versions.sort((a, b) => a.version.localeCompare(b.version)).reverse()
-  const { postgresVersionSelection } = form.watch()
+  const postgresVersionSelection = useWatch({
+    control: form.control,
+    name: 'postgresVersionSelection',
+  })
 
   useEffect(() => {
     if (availableVersions.length > 0) {
diff --git a/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx b/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx
index 0833ed8fda39e..52e2a3adb1330 100644
--- a/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx
+++ b/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import Link from 'next/link'
 import { useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -135,7 +135,10 @@ export const RealtimeSettings = () => {
     } as any,
   })
 
-  const { allow_public, suspend } = form.watch()
+  const [allow_public, suspend] = useWatch({
+    control: form.control,
+    name: ['allow_public', 'suspend'],
+  })
   const isSettingToPrivate = !data?.private_only && !allow_public
   const isDisablingRealtime = !isRealtimeDisabled && suspend
   const isEnablingRealtime = isRealtimeDisabled && !suspend
diff --git a/apps/studio/components/interfaces/Settings/API/DataApiEnableSwitchForm.tsx b/apps/studio/components/interfaces/Settings/API/DataApiEnableSwitchForm.tsx
index 79c0752f08111..7568f35e4d672 100644
--- a/apps/studio/components/interfaces/Settings/API/DataApiEnableSwitchForm.tsx
+++ b/apps/studio/components/interfaces/Settings/API/DataApiEnableSwitchForm.tsx
@@ -1,4 +1,4 @@
-import type { UseFormReturn } from 'react-hook-form'
+import { useWatch, type UseFormReturn } from 'react-hook-form'
 import { CardContent, CardFooter, Form, FormControl, FormField, FormItem, Switch } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
@@ -23,7 +23,7 @@ export const DataApiEnableSwitchForm = ({
   onSubmit: (values: DataApiFormValues) => void
   handleReset: () => void
 }) => {
-  const watchedEnabled = form.watch('enableDataApi')
+  const watchedEnabled = useWatch({ control: form.control, name: 'enableDataApi' })
 
   return (
     <Form {...form}>
diff --git a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
index a3a32de1a34be..79f46c844e132 100644
--- a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'common'
 import { capitalize } from 'lodash'
 import Link from 'next/link'
 import { Fragment, useEffect } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Alert,
@@ -113,7 +113,7 @@ export const ConnectionPooling = () => {
       max_client_conn: undefined,
     },
   })
-  const { default_pool_size } = form.watch()
+  const default_pool_size = useWatch({ control: form.control, name: 'default_pool_size' })
   const connectionPoolingUnavailable = pgbouncerConfig?.pool_mode === null
   const ignoreStartupParameters = pgbouncerConfig?.ignore_startup_parameters
 
diff --git a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx
index 3c29635c1a565..2725474aea14d 100644
--- a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useParams } from 'common'
 import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs'
 import { useEffect, useMemo } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -161,7 +161,7 @@ export function JitDbAccessRuleSheet({
     defaultValues,
     resolver: zodResolver(FormSchema),
   })
-  const grants = form.watch('grants')
+  const grants = useWatch({ control: form.control, name: 'grants' })
 
   const onCloseSheet = () => {
     setIsNewRule(false)
diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
index 956cacd0f5599..37269e91fe6a0 100644
--- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
+++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import {
   Button,
   Card,
@@ -71,7 +71,7 @@ export const CustomDomainsConfigureHostname = () => {
     )
   }
 
-  const domain = form.watch('domain')
+  const domain = useWatch({ control: form.control, name: 'domain' })
   const trimmedDomain = domain.trim()
   const isSubmitting = isCheckingRecord || isCreating
 
diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
index ddf5df5a7278f..d56634f0111eb 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Loader2 } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -174,9 +174,18 @@ export const GitHubIntegrationConnectionForm = ({
     },
   })
 
-  const enableProductionSync = githubSettingsForm.watch('enableProductionSync')
-  const newBranchPerPr = githubSettingsForm.watch('new_branch_per_pr')
-  const currentRepositoryId = githubSettingsForm.watch('repositoryId')
+  const enableProductionSync = useWatch({
+    control: githubSettingsForm.control,
+    name: 'enableProductionSync',
+  })
+  const newBranchPerPr = useWatch({
+    control: githubSettingsForm.control,
+    name: 'new_branch_per_pr',
+  })
+  const currentRepositoryId = useWatch({
+    control: githubSettingsForm.control,
+    name: 'repositoryId',
+  })
 
   const handleCreateOrUpdateConnection = async (data: z.infer<typeof GitHubSettingsSchema>) => {
     if (!selectedProject?.ref || !selectedOrganization?.id) return
diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx
index 7ec922a48da38..c1149f96f0c31 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx
@@ -1,6 +1,6 @@
 import { ChevronDown, PlusIcon, RefreshCw } from 'lucide-react'
 import { useMemo, useState, type ComponentProps, type ReactNode } from 'react'
-import type { FieldValues, Path, UseFormReturn } from 'react-hook-form'
+import { useWatch, type FieldValues, type Path, type UseFormReturn } from 'react-hook-form'
 import {
   Button,
   Command,
@@ -125,7 +125,7 @@ export const GitHubRepositoryField = <TFormValues extends FieldValues>({
 }: GitHubRepositoryFieldProps<TFormValues>) => {
   const [isRepoSelectorOpen, setIsRepoSelectorOpen] = useState(false)
 
-  const currentRepositoryId = form.watch(name) as string | undefined
+  const currentRepositoryId = useWatch({ control: form.control, name }) as string | undefined
   const selectedRepository = repositories.find((repo) => repo.id === currentRepositoryId)
 
   return (
diff --git a/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx b/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
index 09cb69ccf4bf1..c5257fd3afa95 100644
--- a/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
@@ -3,7 +3,7 @@ import { useParams } from 'common'
 import { Eye, EyeOff } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import { Button, cn, Form, FormControl, FormField, Separator } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
@@ -55,6 +55,8 @@ export const ResetPasswordForm = () => {
     mode: 'onChange',
   })
 
+  const password = useWatch({ control: form.control, name: 'password' })
+
   const onResetPassword = async (data: FormData) => {
     const toastId = toast.loading('Saving password...')
     const { error } = await auth.updateUser({
@@ -146,7 +148,7 @@ export const ResetPasswordForm = () => {
             'transition-all duration-400 overflow-y-hidden'
           )}
         >
-          <PasswordConditionsHelper password={form.watch('password')} />
+          <PasswordConditionsHelper password={password} />
         </div>
 
         <Separator className="bg-border" />
diff --git a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
index 88198f6808d0e..3e9d040ae215c 100644
--- a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
@@ -7,7 +7,7 @@ import { Lock } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { Button, Form, FormControl, FormField, Input } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
@@ -41,7 +41,7 @@ export const SignInMfaForm = ({ context = 'sign-in' }: SignInMfaFormProps) => {
     defaultValues: { code: '' },
   })
 
-  const { code } = form.watch()
+  const code = useWatch({ control: form.control, name: 'code' })
 
   const {
     data: factors,
diff --git a/apps/studio/components/interfaces/SignIn/SignUpForm.tsx b/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
index 6f5e6a33df8ae..f4640f9ad341d 100644
--- a/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
@@ -5,7 +5,7 @@ import { CheckCircle, Eye, EyeOff } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { parseAsString, useQueryStates } from 'nuqs'
 import { useRef, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Alert,
@@ -126,7 +126,7 @@ export const SignUpForm = () => {
     })
   }
 
-  const password = form.watch('password')
+  const password = useWatch({ control: form.control, name: 'password' })
   const isSubmitting = form.formState.isSubmitting || isSigningUp
 
   return (
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.constants.ts b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.constants.ts
index 63389dbc20d08..7a8b4ada0806d 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.constants.ts
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.constants.ts
@@ -15,9 +15,16 @@ export const COLUMN_TYPES = [
   'binary',
   'decimal',
   'fixed',
-]
+] as const
 
-export const COLUMN_TYPE_FIELDS = {
+export type ColumnType = (typeof COLUMN_TYPES)[number]
+
+interface AdditionalColumnField {
+  name: 'precision' | 'scale' | 'length'
+  type: 'number'
+}
+
+export const COLUMN_TYPE_FIELDS: Partial<Record<ColumnType, AdditionalColumnField[]>> = {
   decimal: [
     { name: 'precision', type: 'number' },
     { name: 'scale', type: 'number' },
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.schema.ts b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.schema.ts
index 05f0edee7ba27..a5896e5066d57 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.schema.ts
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.schema.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod'
 
-import { NEW_NAMESPACE_MARKER } from './CreateTableSheet.constants'
+import { COLUMN_TYPES, NEW_NAMESPACE_MARKER } from './CreateTableSheet.constants'
 
 const getValidRegex = (type: 'namespace' | 'table') =>
   type === 'namespace'
@@ -37,7 +37,7 @@ export const createFormSchema = () =>
       columns: z
         .object({
           name: z.string().min(1, 'Provide a name for your column'),
-          type: z.string().min(1, 'Select a type for your column'),
+          type: z.enum(COLUMN_TYPES, { message: 'Select a type for your column' }),
           // For decimal type
           precision: z.number().optional(),
           scale: z.number().int().optional(),
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.tsx
index c93911b7aa638..baa8f39d07aef 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.tsx
@@ -1,8 +1,8 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useParams } from 'common'
 import { Plus, X } from 'lucide-react'
-import { Fragment, useState } from 'react'
-import { SubmitHandler, useFieldArray, useForm } from 'react-hook-form'
+import { useState } from 'react'
+import { Control, SubmitHandler, useFieldArray, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -43,6 +43,8 @@ import { useIcebergNamespacesQuery } from '@/data/storage/iceberg-namespaces-que
 const formId = 'create-namespace-table'
 const NEW_NAMESPACE_MARKER = 'new-namespace'
 
+type CreateTableFormValues = z.infer<ReturnType<typeof createFormSchema>>
+
 interface CreateTableSheetProps {
   open: boolean
   onOpenChange: (value: boolean) => void
@@ -53,18 +55,18 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
   const [isCreating, setIsCreating] = useState(false)
 
   const FormSchema = createFormSchema()
-  const defaultValues = {
+  const defaultValues: CreateTableFormValues = {
     namespace: '',
     newNamespace: undefined,
     name: '',
-    columns: [{ name: '', type: 'string' as any }],
+    columns: [{ name: '', type: 'string' }],
   }
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
     defaultValues,
     mode: 'onChange',
   })
-  const { namespace } = form.watch()
+  const namespace = useWatch({ control: form.control, name: 'namespace' })
   const {
     fields: columns,
     append: appendColumn,
@@ -238,102 +240,15 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
                           <p className="text-xs text-foreground-lighter">Name</p>
                           <p className="text-xs text-foreground-lighter">Type</p>
                         </div>
-                        {columns.map((_, idx) => {
-                          const columnType = form.watch(`columns.${idx}.type`)
-                          const additionalFields =
-                            COLUMN_TYPE_FIELDS[columnType as keyof typeof COLUMN_TYPE_FIELDS] ?? []
-
-                          return (
-                            <Fragment key={`column-${idx}`}>
-                              <div className="grid grid-cols-[1fr_1fr_32px] gap-x-1">
-                                <FormField
-                                  control={form.control}
-                                  name={`columns.${idx}.name`}
-                                  render={({ field }) => (
-                                    <FormItemLayout>
-                                      <FormControl>
-                                        <Input
-                                          {...field}
-                                          placeholder="Provide a column name"
-                                          disabled={isCreating}
-                                          className="h-auto"
-                                        />
-                                      </FormControl>
-                                    </FormItemLayout>
-                                  )}
-                                />
-                                <FormField
-                                  control={form.control}
-                                  name={`columns.${idx}.type`}
-                                  render={({ field }) => (
-                                    <FormControl>
-                                      <Select value={field.value} onValueChange={field.onChange}>
-                                        <SelectTrigger className="h-auto">
-                                          <SelectValue placeholder="Select a type" />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                          {COLUMN_TYPES.map((x) => (
-                                            <SelectItem key={x} value={x}>
-                                              {x}
-                                            </SelectItem>
-                                          ))}
-                                        </SelectContent>
-                                      </Select>
-                                    </FormControl>
-                                  )}
-                                />
-                                <div className="flex items-center justify-center">
-                                  <Button
-                                    variant="text"
-                                    size="tiny"
-                                    icon={<X strokeWidth={1.5} size={14} />}
-                                    className="w-6 h-6"
-                                    onClick={() => removeColumn(idx)}
-                                  />
-                                </div>
-
-                                {additionalFields.length > 0 && (
-                                  <div className="col-span-full flex items-center mt-2">
-                                    <div className="flex items-center justify-end gap-1 w-[85%] ">
-                                      {additionalFields.map((x) => (
-                                        <FormField
-                                          control={form.control}
-                                          key={`columns.${idx}.${x.name}`}
-                                          name={`columns.${idx}.${x.name}` as any}
-                                          render={({ field }) => (
-                                            <FormItemLayout>
-                                              <FormControl>
-                                                <InputGroup>
-                                                  <InputGroupAddon align="inline-start">
-                                                    {x.name}
-                                                  </InputGroupAddon>
-                                                  <FormInputGroupInput
-                                                    {...field}
-                                                    type={x.type === 'number' ? 'number' : 'text'}
-                                                    disabled={isCreating}
-                                                    className="h-[34px] rounded-l-none"
-                                                    onChange={(event) =>
-                                                      field.onChange(
-                                                        isNaN(event.target.valueAsNumber)
-                                                          ? null
-                                                          : event.target.valueAsNumber
-                                                      )
-                                                    }
-                                                  />
-                                                </InputGroup>
-                                              </FormControl>
-                                            </FormItemLayout>
-                                          )}
-                                        />
-                                      ))}
-                                    </div>
-                                    <div className="w-4 h-[1.6rem] border-r border-b rounded-br mr-3 border-control -translate-y-3" />
-                                  </div>
-                                )}
-                              </div>
-                            </Fragment>
-                          )
-                        })}
+                        {columns.map((column, idx) => (
+                          <ColumnRow
+                            key={column.id}
+                            control={form.control}
+                            idx={idx}
+                            isCreating={isCreating}
+                            onRemove={() => removeColumn(idx)}
+                          />
+                        ))}
                       </>
                     )}
                   </div>
@@ -362,3 +277,101 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
     </Sheet>
   )
 }
+
+interface ColumnRowProps {
+  control: Control<CreateTableFormValues>
+  idx: number
+  isCreating: boolean
+  onRemove: () => void
+}
+
+const ColumnRow = ({ control, idx, isCreating, onRemove }: ColumnRowProps) => {
+  const columnType = useWatch({ control, name: `columns.${idx}.type` })
+  const additionalFields = COLUMN_TYPE_FIELDS[columnType] ?? []
+
+  return (
+    <div className="grid grid-cols-[1fr_1fr_32px] gap-x-1">
+      <FormField
+        control={control}
+        name={`columns.${idx}.name`}
+        render={({ field }) => (
+          <FormItemLayout>
+            <FormControl>
+              <Input
+                {...field}
+                placeholder="Provide a column name"
+                disabled={isCreating}
+                className="h-auto"
+              />
+            </FormControl>
+          </FormItemLayout>
+        )}
+      />
+      <FormField
+        control={control}
+        name={`columns.${idx}.type`}
+        render={({ field }) => (
+          <FormControl>
+            <Select value={field.value} onValueChange={field.onChange}>
+              <SelectTrigger className="h-auto">
+                <SelectValue placeholder="Select a type" />
+              </SelectTrigger>
+              <SelectContent>
+                {COLUMN_TYPES.map((x) => (
+                  <SelectItem key={x} value={x}>
+                    {x}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </FormControl>
+        )}
+      />
+      <div className="flex items-center justify-center">
+        <Button
+          aria-label="Remove"
+          variant="text"
+          size="tiny"
+          icon={<X strokeWidth={1.5} size={14} />}
+          className="w-6 h-6"
+          onClick={onRemove}
+        />
+      </div>
+
+      {additionalFields.length > 0 && (
+        <div className="col-span-full flex items-center mt-2">
+          <div className="flex items-center justify-end gap-1 w-[85%] ">
+            {additionalFields.map((x) => (
+              <FormField
+                control={control}
+                key={`columns.${idx}.${x.name}`}
+                name={`columns.${idx}.${x.name}`}
+                render={({ field }) => (
+                  <FormItemLayout>
+                    <FormControl>
+                      <InputGroup>
+                        <InputGroupAddon align="inline-start">{x.name}</InputGroupAddon>
+                        <FormInputGroupInput
+                          {...field}
+                          type={x.type === 'number' ? 'number' : 'text'}
+                          disabled={isCreating}
+                          className="h-[34px] rounded-l-none"
+                          onChange={(event) =>
+                            field.onChange(
+                              isNaN(event.target.valueAsNumber) ? null : event.target.valueAsNumber
+                            )
+                          }
+                        />
+                      </InputGroup>
+                    </FormControl>
+                  </FormItemLayout>
+                )}
+              />
+            ))}
+          </div>
+          <div className="w-4 h-[1.6rem] border-r border-b rounded-br mr-3 border-control -translate-y-3" />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
index 58d90f9592189..38c9cc7626957 100644
--- a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useParams } from 'common'
 import { useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -108,8 +108,8 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
     },
   })
   const { formatted_size_limit: formattedSizeLimitError } = form.formState.errors
-  const isPublicBucket = form.watch('public')
-  const hasFileSizeLimit = form.watch('has_file_size_limit')
+  const isPublicBucket = useWatch({ control: form.control, name: 'public' })
+  const hasFileSizeLimit = useWatch({ control: form.control, name: 'has_file_size_limit' })
 
   const onSubmit: SubmitHandler<CreateBucketForm> = async (values) => {
     if (!ref) return console.error('Project ref is required')
diff --git a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
index cdab844adfed9..125d45e2d093d 100644
--- a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useParams } from 'common'
 import { useEffect, useRef, useState } from 'react'
-import { useForm, type SubmitHandler } from 'react-hook-form'
+import { useForm, useWatch, type SubmitHandler } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -121,8 +121,8 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
   })
   const { formatted_size_limit: formattedSizeLimitError } = form.formState.errors
 
-  const isPublicBucket = form.watch('public')
-  const hasFileSizeLimit = form.watch('has_file_size_limit')
+  const isPublicBucket = useWatch({ control: form.control, name: 'public' })
+  const hasFileSizeLimit = useWatch({ control: form.control, name: 'has_file_size_limit' })
   const [hasAllowedMimeTypes, setHasAllowedMimeTypes] = useState(
     Boolean(bucket?.allowed_mime_types?.length)
   )
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
index 3a3bf7ca63f24..d93c413405b69 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { IS_PLATFORM, useParams } from 'common'
 import { useEffect, useMemo, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
@@ -158,7 +158,7 @@ export const StorageSettings = () => {
     reValidateMode: 'onSubmit',
   })
 
-  const { unit: storageUnit } = form.watch()
+  const storageUnit = useWatch({ control: form.control, name: 'unit' })
   const fileSizeLimitError = form.formState.errors.fileSizeLimit
 
   const { mutate: updateStorageConfig } = useProjectStorageConfigUpdateUpdateMutation({
diff --git a/apps/studio/components/interfaces/Support/LinkSupportTicketForm.tsx b/apps/studio/components/interfaces/Support/LinkSupportTicketForm.tsx
index 1d104342edb2d..813ba72864803 100644
--- a/apps/studio/components/interfaces/Support/LinkSupportTicketForm.tsx
+++ b/apps/studio/components/interfaces/Support/LinkSupportTicketForm.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Link2 } from 'lucide-react'
 import { useEffect } from 'react'
 import type { SubmitHandler } from 'react-hook-form'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import { Button, DialogSectionSeparator, Form, FormControl, FormField, Input } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -51,7 +51,10 @@ export const LinkSupportTicketForm = ({
     reValidateMode: 'onBlur',
   })
 
-  const { category, organizationSlug, projectRef } = form.watch()
+  const [category, organizationSlug, projectRef] = useWatch({
+    control: form.control,
+    name: ['category', 'organizationSlug', 'projectRef'],
+  })
   const selectedOrgSlug = organizationSlug === NO_ORG_MARKER ? null : organizationSlug
   const selectedProjectRef = projectRef === NO_PROJECT_MARKER ? null : projectRef
   const subscriptionPlanId = getOrgSubscriptionPlan(organizations, selectedOrgSlug)
diff --git a/apps/studio/components/interfaces/Support/SupportFormV2.tsx b/apps/studio/components/interfaces/Support/SupportFormV2.tsx
index eeb9a7d5bfb22..adf6400dd4a9d 100644
--- a/apps/studio/components/interfaces/Support/SupportFormV2.tsx
+++ b/apps/studio/components/interfaces/Support/SupportFormV2.tsx
@@ -4,6 +4,7 @@ import { useConstant, useFlag } from 'common'
 import { CLIENT_LIBRARIES } from 'common/constants'
 import { type Dispatch, type MouseEventHandler } from 'react'
 import type { SubmitHandler, UseFormReturn } from 'react-hook-form'
+import { useWatch } from 'react-hook-form'
 import { DialogSectionSeparator, Form } from 'ui'
 
 import {
@@ -71,7 +72,10 @@ export const SupportFormV2 = ({ form, initialError, state, dispatch }: SupportFo
   const { profile } = useProfile()
   const respondToEmail = profile?.primary_email ?? 'your email'
 
-  const { organizationSlug, projectRef, category, severity, subject, library } = form.watch()
+  const [organizationSlug, projectRef, category, severity, subject, library] = useWatch({
+    control: form.control,
+    name: ['organizationSlug', 'projectRef', 'category', 'severity', 'subject', 'library'],
+  })
 
   const selectedOrgSlug = organizationSlug === NO_ORG_MARKER ? null : organizationSlug
   const selectedProjectRef = projectRef === NO_PROJECT_MARKER ? null : projectRef
diff --git a/apps/studio/components/interfaces/Support/SupportFormV3.tsx b/apps/studio/components/interfaces/Support/SupportFormV3.tsx
index d8629c4c5f49f..764dc5959eb4c 100644
--- a/apps/studio/components/interfaces/Support/SupportFormV3.tsx
+++ b/apps/studio/components/interfaces/Support/SupportFormV3.tsx
@@ -4,6 +4,7 @@ import { useConstant, useFlag } from 'common'
 import { CLIENT_LIBRARIES } from 'common/constants'
 import { type Dispatch, type MouseEventHandler } from 'react'
 import type { SubmitHandler, UseFormReturn } from 'react-hook-form'
+import { useWatch } from 'react-hook-form'
 import { Form, Separator } from 'ui'
 import { v4 as uuidv4 } from 'uuid'
 
@@ -80,7 +81,10 @@ export const SupportFormV3 = ({
   const { profile } = useProfile()
   const respondToEmail = profile?.primary_email ?? 'your email'
 
-  const { organizationSlug, projectRef, category, severity, subject, library } = form.watch()
+  const [organizationSlug, projectRef, category, severity, subject, library] = useWatch({
+    control: form.control,
+    name: ['organizationSlug', 'projectRef', 'category', 'severity', 'subject', 'library'],
+  })
 
   const selectedOrgSlug = organizationSlug === NO_ORG_MARKER ? null : organizationSlug
   const currentProjectRef = projectRef === NO_PROJECT_MARKER ? null : projectRef