React Compiler: maximize compatibility with react-hook-form

packages/billing/gateway/src/components/plan-picker.tsx

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ArrowRight, CheckCircle } from 'lucide-react';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 
@@ -87,7 +87,10 @@ export function PlanPicker(
     },
   });
 
-  const { interval: selectedInterval } = form.watch();
+  const selectedInterval = useWatch({
+    name: 'interval',
+    control: form.control,
+  });
   const planId = form.getValues('planId');
 
   const { plan: selectedPlan, product: selectedProduct } = useMemo(() => {

packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx

@@ -2,13 +2,11 @@
 
 import { useCallback, useState } from 'react';
 
-import Image from 'next/image';
-
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { ArrowLeftIcon } from 'lucide-react';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 import { z } from 'zod';
@@ -119,6 +117,11 @@ function MultiFactorAuthSetupForm({
     error: '',
   });
 
+  const factorId = useWatch({
+    name: 'factorId',
+    control: verificationCodeForm.control,
+  });
+
   const onSubmit = useCallback(
     async ({
       verificationCode,
@@ -174,7 +177,7 @@ function MultiFactorAuthSetupForm({
         />
       </div>
 
-      <If condition={verificationCodeForm.watch('factorId')}>
+      <If condition={factorId}>
         <Form {...verificationCodeForm}>
           <form
             onSubmit={verificationCodeForm.handleSubmit(onSubmit)}
@@ -270,7 +273,7 @@ function FactorQrCode({
     },
   });
 
-  const factorName = form.watch('factorName');
+  const factorName = useWatch({ name: 'factorName', control: form.control });
 
   if (error) {
     return (
@@ -405,7 +408,7 @@ function FactorNameForm(
 }
 
 function QrImage({ src }: { src: string }) {
-  return <Image alt={'QR Code'} src={src} width={160} height={160} />;
+  return <img alt={'QR Code'} src={src} width={160} height={160} />;
 }
 
 function useEnrollFactor(userId: string) {

packages/features/auth/src/components/multi-factor-challenge-container.tsx

@@ -5,7 +5,7 @@ import { useEffect } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { useMutation } from '@tanstack/react-query';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 
 import { useFetchAuthFactors } from '@kit/supabase/hooks/use-fetch-mfa-factors';
@@ -59,7 +59,10 @@ export function MultiFactorChallengeContainer({
     },
   });
 
-  const factorId = verificationCodeForm.watch('factorId');
+  const factorId = useWatch({
+    name: 'factorId',
+    control: verificationCodeForm.control,
+  });
 
   if (!factorId) {
     return (