[b-l-i-n-d]

ClickUp ticket link: https://app.clickup.com/t/9018365849/z8zyy1prfm

Description

This PR forms Layer 3 of the build stack. It integrates React Compiler into Tutor LMS's Rspack build pipeline using @rspack/plugin-react-compiler (targeting React 18) and resolves form state memoization across Course Builder and Coupon Details.

Key Changes

• React Compiler Enabled: Configured reactCompiler: { target: '18' } in rspack.config.mjs for SWC transformation.
• Runtime Dependency: Added react-compiler-runtime dependency in package.json.
• Form Memoization & Reactivity:
  • Replaced mutable dirtyFields checks with form.formState.isDirty across Tracker, Header, LessonModal, QuizModal, and AssignmentModal.
  • Migrated form.watch to useWatch and wrapped useFormWithGlobalError with useFormState for fine-grained subscription tracking.
  • Refactored 10 Coupon Details components (CouponPreview, CouponValidity, CouponDiscount, CouponInfo, CouponLimitation, Topbar, and CourseListModal tables) to useWatch so date pickers, discounts, and modal previews remain interactive after React Compiler memoization.

Performance & Bundle Size Stats

Bundle Entrypoint	Baseline (dev)	React Compiler (compress: false)	Final (React Compiler + Optimized Minifier)	Net Change vs Baseline
tutor-course-builder.js	1,080 KiB	1,142 KiB (+5.7%)	809 KiB	-271 KiB (-25.1%)
tutor-order-details.js	668 KiB	726 KiB (+8.7%)	555 KiB	-113 KiB (-16.9%)
tutor-payment-settings.js	780 KiB	829 KiB (+6.3%)	640 KiB	-140 KiB (-17.9%)
tutor-tax-settings.js	695 KiB	743 KiB (+6.9%)	565 KiB	-130 KiB (-18.7%)
tutor-import-export.js	727 KiB	778 KiB (+7.0%)	589 KiB	-138 KiB (-19.0%)
tutor-coupon.js	545 KiB	563 KiB (+3.3%)	455 KiB	-90 KiB (-16.5%)
tutor-addon-list.js	494 KiB	519 KiB (+5.1%)	377 KiB	-117 KiB (-23.7%)
tutor-core.js	224 KiB	224 KiB (0.0%)	190 KiB	-34 KiB (-15.2%)
tutor.js	135 KiB	146 KiB (+8.1%)	118 KiB	-17 KiB (-12.6%)

Runtime Impact

• Automatic Memoization: Hand-written useMemo and useCallback guards are automated at compile time (540+ memoization cache sentinels generated).
• Interactive UI: Course builder drag-and-drop, modal dialogs, and settings only re-render when their specific reactive props or watched state change.

Stack

1. 📦 build(deps): update project dependencies and ESLint 10 configuration #3132 (Dependency) build/dependencies -> dev
2. 🗜️ perf(build): optimize SWC minifier with translation-safe compression #3133 (Compress) build/minifier-compression -> build/dependencies
3. # (Compiler) react-compiler -> build/minifier-compression

Testing

• Tested
• Not tested

• Verified rspack --mode=production compiles cleanly.
• Verified React Compiler transforms components and hooks with target 18.
• Verified form interactivity, dirty indicators, and coupon previews function seamlessly.

Use of AI Tool

Used: Yes

Used for:

Assisted in setting up React Compiler with Rspack, benchmarking production bundles, and resolving form state memoization across Course Builder and Coupon Details.