⚡ feat(build): Add React Compiler support and optimize component rendering

assets/src/js/v3/entries/coupon-details/components/coupon/CouponDiscount.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import { css } from '@emotion/react';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -62,12 +62,12 @@ function CouponDiscount() {
   const { tutor_currency } = tutorConfig;
   const { showModal } = useModal();
 
-  const appliesTo = form.watch('applies_to');
-  const discountType = form.watch('discount_type');
-  const courses = form.watch('courses') ?? [];
-  const bundles = form.watch('bundles') ?? [];
-  const categories = form.watch('categories') ?? [];
-  const membershipPlans = form.watch('membershipPlans') ?? [];
+  const appliesTo = useWatch({ control: form.control, name: 'applies_to' });
+  const discountType = useWatch({ control: form.control, name: 'discount_type' });
+  const courses = useWatch({ control: form.control, name: 'courses' }) ?? [];
+  const bundles = useWatch({ control: form.control, name: 'bundles' }) ?? [];
+  const categories = useWatch({ control: form.control, name: 'categories' }) ?? [];
+  const membershipPlans = useWatch({ control: form.control, name: 'membershipPlans' }) ?? [];
 
   const modalType = {
     specific_courses: 'courses',
@@ -210,7 +210,7 @@ function CouponDiscount() {
 
       {appliesTo === 'specific_membership_plans' && membershipPlans.length > 0 && (
         <div css={styles.selectedWrapper}>
-          {form.watch('membershipPlans')?.map((item) => (
+          {membershipPlans?.map((item) => (
             <AppliesToItem
               key={item.id}
               type="membershipPlans"

assets/src/js/v3/entries/coupon-details/components/coupon/CouponInfo.tsx

@@ -1,4 +1,4 @@
-import { Controller, useFormContext } from 'react-hook-form';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import { css } from '@emotion/react';
 import { __, sprintf } from '@wordpress/i18n';
 import { format } from 'date-fns';
@@ -29,7 +29,7 @@ function CouponInfo() {
   const isEditMode = !!courseId;
 
   const form = useFormContext<Coupon>();
-  const couponType = form.watch('coupon_type');
+  const couponType = useWatch({ control: form.control, name: 'coupon_type' });
 
   function handleGenerateCouponCode() {
     const newCouponCode = generateCouponCode();

assets/src/js/v3/entries/coupon-details/components/coupon/CouponLimitation.tsx

@@ -1,4 +1,4 @@
-import { Controller, useFormContext } from 'react-hook-form';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import { css } from '@emotion/react';
 import { __ } from '@wordpress/i18n';
 
@@ -16,8 +16,8 @@ import type { Coupon } from '@CouponDetails/services/coupon';
 
 function CouponLimitation() {
   const form = useFormContext<Coupon>();
-  const usage_limit_status = form.watch('usage_limit_status');
-  const per_user_limit_status = form.watch('per_user_limit_status');
+  const usage_limit_status = useWatch({ control: form.control, name: 'usage_limit_status' });
+  const per_user_limit_status = useWatch({ control: form.control, name: 'per_user_limit_status' });
 
   return (
     <Box bordered css={styles.discountWrapper}>

assets/src/js/v3/entries/coupon-details/components/coupon/CouponPreview.tsx

@@ -1,4 +1,4 @@
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, useWatch } from 'react-hook-form';
 import { css } from '@emotion/react';
 import { __, sprintf } from '@wordpress/i18n';
 import { format, isToday, isTomorrow, isValid } from 'date-fns';
@@ -48,17 +48,17 @@ const discountTypeText = (appliesTo: CouponAppliesTo, discountText: string) => {
 function CouponPreview() {
   const form = useFormContext<Coupon>();
 
-  const couponTitle = form.watch('coupon_title');
-  const couponType = form.watch('coupon_type');
-  const couponCode = form.watch('coupon_code');
-  const discountType = form.watch('discount_type');
-  const discountAmount = form.watch('discount_amount');
-  const startDate = form.watch('start_date');
-  const startTime = form.watch('start_time');
-  const endDate = form.watch('end_date');
-  const appliesTo = form.watch('applies_to');
-  const perUserUsageLimit = form.watch('per_user_usage_limit');
-  const couponUsedCount = form.watch('coupon_uses');
+  const couponTitle = useWatch({ control: form.control, name: 'coupon_title' });
+  const couponType = useWatch({ control: form.control, name: 'coupon_type' });
+  const couponCode = useWatch({ control: form.control, name: 'coupon_code' });
+  const discountType = useWatch({ control: form.control, name: 'discount_type' });
+  const discountAmount = useWatch({ control: form.control, name: 'discount_amount' });
+  const startDate = useWatch({ control: form.control, name: 'start_date' });
+  const startTime = useWatch({ control: form.control, name: 'start_time' });
+  const endDate = useWatch({ control: form.control, name: 'end_date' });
+  const appliesTo = useWatch({ control: form.control, name: 'applies_to' });
+  const perUserUsageLimit = useWatch({ control: form.control, name: 'per_user_usage_limit' });
+  const couponUsedCount = useWatch({ control: form.control, name: 'coupon_uses' });
 
   const startDateTime = startDate && startTime ? `${startDate} ${startTime}` : '';
   const activeFromSuffix = isValid(new Date(startDateTime))

assets/src/js/v3/entries/coupon-details/components/coupon/CouponValidity.tsx

@@ -1,4 +1,4 @@
-import { Controller, useFormContext } from 'react-hook-form';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import { css } from '@emotion/react';
 import { __ } from '@wordpress/i18n';
 
@@ -19,9 +19,9 @@ import type { Coupon } from '@CouponDetails/services/coupon';
 function CouponValidity() {
   const form = useFormContext<Coupon>();
 
-  const isEndEnabled = form.watch('is_end_enabled');
-  const startDate = form.watch('start_date');
-  const startTime = form.watch('start_time');
+  const isEndEnabled = useWatch({ control: form.control, name: 'is_end_enabled' });
+  const startDate = useWatch({ control: form.control, name: 'start_date' });
+  const startTime = useWatch({ control: form.control, name: 'start_time' });
   const hasStartDateTime = !!startDate && !!startTime;
 
   return (

assets/src/js/v3/entries/coupon-details/components/layout/Topbar.tsx

@@ -1,4 +1,4 @@
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, useWatch } from 'react-hook-form';
 import { css } from '@emotion/react';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -35,6 +35,7 @@ function Topbar() {
 
   const form = useFormContext<Coupon>();
   const coupon = form.getValues();
+  const couponStatus = useWatch({ control: form.control, name: 'coupon_status' }) ?? coupon.coupon_status ?? 'active';
   const createCouponMutation = useCreateCouponMutation();
   const updateCouponMutation = useUpdateCouponMutation();
 
@@ -66,8 +67,8 @@ function Topbar() {
                 <h4 css={styles.headerTitle}>
                   {courseId ? __('Update Coupon', 'tutor') : __('Create Coupon', 'tutor')}
                 </h4>
-                <TutorBadge variant={statusVariant[coupon.coupon_status]}>
-                  {makeFirstCharacterUpperCase(coupon.coupon_status)}
+                <TutorBadge variant={statusVariant[couponStatus]}>
+                  {makeFirstCharacterUpperCase(couponStatus)}
                 </TutorBadge>
               </div>
               <Show

assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/CategoryListTable.tsx

@@ -1,4 +1,4 @@
-import type { UseFormReturn } from 'react-hook-form';
+import { type UseFormReturn, useWatch } from 'react-hook-form';
 import { css } from '@emotion/react';
 import { __ } from '@wordpress/i18n';
 
@@ -23,7 +23,7 @@ interface CategoryListTableProps {
 }
 
 const CategoryListTable = ({ form }: CategoryListTableProps) => {
-  const selectedCategories = form.watch('categories') ?? [];
+  const selectedCategories = useWatch({ control: form.control, name: 'categories' }) ?? [];
   const { pageInfo, onPageChange, itemsPerPage, offset, onFilterItems } = usePaginatedTable();
   const categoryListQuery = useAppliesToQuery({
     applies_to: 'specific_category',

assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/CourseListTable.tsx

@@ -1,4 +1,4 @@
-import type { UseFormReturn } from 'react-hook-form';
+import { type UseFormReturn, useWatch } from 'react-hook-form';
 import { css } from '@emotion/react';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -24,7 +24,7 @@ interface CourseListTableProps {
 }
 
 const CourseListTable = ({ type, form }: CourseListTableProps) => {
-  const selectedCourses = form.watch(type) || [];
+  const selectedCourses = useWatch({ control: form.control, name: type }) || [];
   const { pageInfo, onPageChange, itemsPerPage, offset, onFilterItems } = usePaginatedTable();
   const courseListQuery = useAppliesToQuery({
     applies_to: type === 'courses' ? 'specific_courses' : 'specific_bundles',

assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/MembershipPlanListTable.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { type UseFormReturn } from 'react-hook-form';
+import { type UseFormReturn, useWatch } from 'react-hook-form';
 import { css } from '@emotion/react';
 import { __ } from '@wordpress/i18n';
 
@@ -27,7 +27,8 @@ interface MembershipPlanListTableProps {
 }
 
 const MembershipPlanListTable = ({ form }: MembershipPlanListTableProps) => {
-  const selectedPlans = useMemo(() => form.watch('membershipPlans') || [], [form]);
+  const watchedPlans = useWatch({ control: form.control, name: 'membershipPlans' });
+  const selectedPlans = useMemo(() => watchedPlans || [], [watchedPlans]);
   const getMembershipPlanListQuery = useMembershipPlansQuery();
   const [searchTerm, setSearchTerm] = useState<string>('');
 

assets/src/js/v3/entries/coupon-details/components/modals/CourseListModal/SearchField.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Controller } from 'react-hook-form';
+import { Controller, useWatch } from 'react-hook-form';
 import { __ } from '@wordpress/i18n';
 
 import SVGIcon from '@TutorShared/atoms/SVGIcon';
@@ -20,7 +20,8 @@ interface SearchFieldProps {
 
 const SearchField = ({ onFilterItems }: SearchFieldProps) => {
   const actionsForm = useFormWithGlobalError<FilterFormValues>({ defaultValues: { search: '' } });
-  const searchValue = useDebounce(actionsForm.watch('search'));
+  const search = useWatch({ control: actionsForm.control, name: 'search' }) ?? '';
+  const searchValue = useDebounce(search);
 
   useEffect(() => {
     onFilterItems({

assets/src/js/v3/entries/course-builder/components/layouts/Navigator.tsx

@@ -1,4 +1,4 @@
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, useWatch } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { css, type SerializedStyles } from '@emotion/react';
 import { __ } from '@wordpress/i18n';
@@ -30,7 +30,7 @@ const Navigator = ({ styleModifier }: NavigatorProps) => {
   const nextIndex = Math.min(steps.length, currentIndex + 1);
   const previousStep = steps[previousIndex];
   const nextStep = steps[nextIndex];
-  const postTitle = form.watch('post_title');
+  const postTitle = useWatch({ control: form.control, name: 'post_title' });
 
   const handlePreviousClick = () => {
     setSteps((previous) => {

assets/src/js/v3/entries/course-builder/components/layouts/Tracker.tsx

@@ -1,4 +1,4 @@
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, useWatch } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { css } from '@emotion/react';
 
@@ -16,7 +16,7 @@ const Tracker = () => {
   const navigate = useNavigate();
   const form = useFormContext<CourseFormData>();
 
-  const postTitle = form.watch('post_title');
+  const postTitle = useWatch({ control: form.control, name: 'post_title' });
 
   const handleClick = async (step: Step) => {
     navigate(step.path);

assets/src/js/v3/entries/course-builder/components/layouts/header/Header.tsx

@@ -49,7 +49,7 @@ const Header = () => {
 
   const totalEnrolledStudents = (queryClient.getQueryData(['CourseDetails', courseId]) as CourseDetailsResponse)
     ?.total_enrolled_student;
-  const isFormDirty = form.formState.dirtyFields && Object.keys(form.formState.dirtyFields).length > 0;
+  const isFormDirty = form.formState.isDirty;
   const isTutorPro = !!tutorConfig.tutor_pro_url;
   const isOpenAiEnabled = tutorConfig.settings?.chatgpt_enable === 'on';
   const hasOpenAiAPIKey = tutorConfig.settings?.chatgpt_key_exist;

assets/src/js/v3/entries/course-builder/components/modals/AssignmentModal.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Controller } from 'react-hook-form';
+import { Controller, useWatch } from 'react-hook-form';
 import { css } from '@emotion/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { __ } from '@wordpress/i18n';
@@ -138,8 +138,8 @@ const AssignmentModal = ({
     mode: 'onChange',
   });
 
-  const isFormDirty = form.formState.dirtyFields && Object.keys(form.formState.dirtyFields).length > 0;
-  const isRetryAllowed = form.watch('is_retry_allowed');
+  const isFormDirty = form.formState.isDirty;
+  const isRetryAllowed = useWatch({ control: form.control, name: 'is_retry_allowed' });
 
   useEffect(() => {
     if (assignmentDetails) {

assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/ContentListTable.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, useWatch } from 'react-hook-form';
 import { css } from '@emotion/react';
 import { __, _n, sprintf } from '@wordpress/i18n';
 
@@ -30,8 +30,8 @@ type SortDirection = 'asc' | 'desc';
 const ContentListTable = () => {
   const { pageInfo, onPageChange, itemsPerPage, onFilterItems } = usePaginatedTable();
   const form = useFormContext<ContentSelectionForm>();
-  const selectedCollection = form.watch('selectedCollection');
-  const existingContentIds = form.watch('existingContentIds');
+  const selectedCollection = useWatch({ control: form.control, name: 'selectedCollection' });
+  const existingContentIds = useWatch({ control: form.control, name: 'existingContentIds' }) ?? [];
 
   const [contentType, setContentType] = useState<'lesson' | 'assignment' | ''>('');
   const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
@@ -50,7 +50,8 @@ const ContentListTable = () => {
   const totalItems = getContentsQuery.data?.total_record || 0;
   const totalPages = Number(getContentsQuery.data?.total_page || 0);
   const collectionName = selectedCollection?.post_title ?? __('All Contents', 'tutor');
-  const selectedContents = form.watch('contents') || [];
+  const watchedContents = useWatch({ control: form.control, name: 'contents' });
+  const selectedContents = useMemo(() => watchedContents || [], [watchedContents]);
   const selectedContentIds = selectedContents.map((content) => String(content.ID));
   const fetchedContents = useMemo(() => getContentsQuery.data?.data ?? [], [getContentsQuery.data]);
 
@@ -124,9 +125,9 @@ const ContentListTable = () => {
           <div css={styles.checkboxWrapper}>
             <Checkbox
               onChange={() => {
-                const selectedContents = form.watch('contents') || [];
+                const currentSelected = form.getValues('contents') || [];
 
-                const filteredContents = selectedContents.filter((content) => String(content.ID) !== String(item.ID));
+                const filteredContents = currentSelected.filter((content) => String(content.ID) !== String(item.ID));
                 const isNewItem = filteredContents.length === selectedContents.length;
 
                 if (isNewItem) {

assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/FilterFields.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState } from 'react';
+import { useWatch } from 'react-hook-form';
 import { css } from '@emotion/react';
 import { __ } from '@wordpress/i18n';
 
@@ -40,9 +41,9 @@ const FilterFields = ({ onFilterChange, initialValues, type }: FilterFieldsProps
   const [isFiltersPopoverOpen, setIsFiltersPopoverOpen] = useState(false);
   const filterButtonRef = useRef<HTMLButtonElement>(null);
 
-  const order = form.watch('order') || 'asc';
-  const contentTypes = form.watch('contentTypes') || [];
-  const questionTypes = form.watch('questionTypes') || [];
+  const order = useWatch({ control: form.control, name: 'order' }) || 'asc';
+  const contentTypes = useWatch({ control: form.control, name: 'contentTypes' }) || [];
+  const questionTypes = useWatch({ control: form.control, name: 'questionTypes' }) || [];
   const isQuestionType = type === 'question';
 
   return (

assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/QuestionListTable.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, useWatch } from 'react-hook-form';
 import { css } from '@emotion/react';
 import { __, _n, sprintf } from '@wordpress/i18n';
 
@@ -33,7 +33,7 @@ const questionTypeOptions = tutorConfig.is_legacy_learning_mode
 const QuestionListTable = () => {
   const { pageInfo, onPageChange, itemsPerPage, onFilterItems } = usePaginatedTable();
   const form = useFormContext<ContentSelectionForm>();
-  const selectedCollection = form.watch('selectedCollection');
+  const selectedCollection = useWatch({ control: form.control, name: 'selectedCollection' });
   const [questionTypes, setQuestionTypes] = useState<QuizQuestionType[]>([]);
   const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
   const [orderDirection, setOrderDirection] = useState<SortDirection>('asc');
@@ -51,7 +51,8 @@ const QuestionListTable = () => {
   const totalItems = getContentsQuery.data?.total_record || 0;
   const totalPages = Number(getContentsQuery.data?.total_page || 0);
   const collectionName = selectedCollection?.post_title ?? __('All Contents', 'tutor');
-  const selectedContents = form.watch('contents') || [];
+  const watchedContents = useWatch({ control: form.control, name: 'contents' });
+  const selectedContents = useMemo(() => watchedContents || [], [watchedContents]);
   const selectedContentIds = selectedContents.map((content) => String(content.ID));
   const fetchedContents = useMemo(() => getContentsQuery.data?.data ?? [], [getContentsQuery.data]);
 
@@ -113,8 +114,8 @@ const QuestionListTable = () => {
       name: 'title',
       Cell: (item) => {
         const handleItemToggle = () => {
-          const selectedContents = form.watch('contents') || [];
-          const filteredContents = selectedContents.filter((content) => String(content.ID) !== String(item.ID));
+          const currentSelected = form.getValues('contents') || [];
+          const filteredContents = currentSelected.filter((content) => String(content.ID) !== String(item.ID));
           const isNewItem = filteredContents.length === selectedContents.length;
 
           if (isNewItem) {

assets/src/js/v3/entries/course-builder/components/modals/ContentBankContentSelectModal/SearchField.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Controller } from 'react-hook-form';
+import { Controller, useWatch } from 'react-hook-form';
 import { css } from '@emotion/react';
 import { __ } from '@wordpress/i18n';
 
@@ -22,7 +22,8 @@ interface SearchFieldProps {
 
 const SearchField = ({ onFilterItems }: SearchFieldProps) => {
   const actionsForm = useFormWithGlobalError<FilterFormValues>({ defaultValues: { search: '' } });
-  const searchValue = useDebounce(actionsForm.watch('search'));
+  const search = useWatch({ control: actionsForm.control, name: 'search' }) ?? '';
+  const searchValue = useDebounce(search);
 
   useEffect(() => {
     onFilterItems({