Enable React Compiler for ComponentEditor and reorganize config (#1511)

## Description

Enable React Compiler for `ComponentEditor` directory and optimize component functions by removing unnecessary `useCallback` hooks. This PR:

1. Adds `src/components/shared/ComponentEditor` to the React Compiler enabled directories
2. Reorganizes the order of enabled directories in the config file
3. Removes `useCallback` wrappers from functions in:
   - `ComponentEditorDialog.tsx`
   - `PythonComponentEditor.tsx`
   - `YamlComponentEditor.tsx`
4. Replaces a `useEffect` initialization pattern with a ref-based approach in `PythonComponentEditor.tsx`

## Type of Change

- [x] Improvement
- [x] Cleanup/Refactor

## Checklist

- [ ] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Test Instructions

1. Open the Component Editor dialog
2. Test creating and editing components in both YAML and Python modes
3. Verify all functionality works as expected, including saving components and error validation

Author: Mbeaulne

package-lock.json

@@ -21,9 +21,10 @@ export const REACT_COMPILER_ENABLED_DIRS = [
   "src/components/shared/GitHubAuth",
   "src/components/shared/Authentication",
   "src/routes",
+  "src/components/shared/ReactFlow/FlowCanvas/FlowCanvas.tsx",
+  "src/components/shared/ComponentEditor",
 
   // 6-10 useCallback/useMemo
-  // "src/components/shared/ComponentEditor",     // 6
   // "src/components/shared/Settings",            // 6
   // "src/components/shared/HuggingFaceAuth",     // 8
 
@@ -40,7 +41,6 @@ export const REACT_COMPILER_ENABLED_DIRS = [
   // "src/hooks",                                 // 53
   // "src/providers",                             // 75
   // "src/components/shared/ReactFlow", // 190
-  "src/components/shared/ReactFlow/FlowCanvas/FlowCanvas.tsx",
 ];
 
 // Convert to glob patterns for ESLint

react-compiler.config.js

@@ -1,5 +1,5 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
@@ -147,11 +147,11 @@ export const ComponentEditorDialog = withSuspenseWrapper(
       },
     });
 
-    const handleComponentTextChange = useCallback((value: string) => {
+    const handleComponentTextChange = (value: string) => {
       setComponentText(value);
-    }, []);
+    };
 
-    const handleSave = useCallback(async () => {
+    const handleSave = async () => {
       const hydratedComponent = await hydrateComponentReference({
         text: componentText,
       });
@@ -174,11 +174,11 @@ export const ComponentEditorDialog = withSuspenseWrapper(
           "success",
         );
       }
-    }, [componentText, addToComponentLibrary, notify, onClose]);
+    };
 
-    const handleClose = useCallback(() => {
+    const handleClose = () => {
       onClose();
-    }, [onClose]);
+    };
 
     const title = text ? "Edit Component" : "New Component";
     const hasTemplate = templateName && templateName !== "empty";

src/components/shared/ComponentEditor/ComponentEditorDialog.tsx

@@ -1,5 +1,5 @@
 import MonacoEditor from "@monaco-editor/react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { withSuspenseWrapper } from "@/components/shared/SuspenseWrapper";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
@@ -67,53 +67,36 @@ export const PythonComponentEditor = withSuspenseWrapper(
     const preservedNameRef = useRef(initialComponentName);
 
     useEffect(() => {
-      preservedNameRef.current = initialComponentName;
-    }, [initialComponentName]);
+      handleFunctionTextChange(text);
+    }, []);
 
-    const generateYaml = useCallback(
-      async (code: string, options: YamlGeneratorOptions) => {
-        try {
-          const yaml = await yamlGenerator(code, options);
-          const yamlWithPreservedName = preserveComponentName(
-            yaml,
-            preservedNameRef.current,
-          );
-          setComponentText(yamlWithPreservedName);
-          onComponentTextChange(yamlWithPreservedName);
-          setValidationErrors([]);
-          onErrorsChange([]);
-        } catch (error) {
-          const errors = [
-            error instanceof Error ? error.message : String(error),
-          ];
-          onErrorsChange(errors);
-          setValidationErrors(errors);
-        }
-      },
-      [yamlGenerator, onComponentTextChange, onErrorsChange],
-    );
+    // Sync ref with prop
+    preservedNameRef.current = initialComponentName;
 
-    const handleFunctionTextChange = useCallback(
-      async (value: string | undefined) => {
-        const code = value ?? "";
-        setPythonCode(code);
-        generateYaml(code, yamlGeneratorOptions);
-      },
-      [generateYaml, yamlGeneratorOptions],
-    );
+    const handleFunctionTextChange = async (value: string | undefined) => {
+      const code = value ?? "";
+      setPythonCode(code);
+      try {
+        const yaml = await yamlGenerator(code, yamlGeneratorOptions);
+        const yamlWithPreservedName = preserveComponentName(
+          yaml,
+          preservedNameRef.current,
+        );
+        setComponentText(yamlWithPreservedName);
+        onComponentTextChange(yamlWithPreservedName);
+        setValidationErrors([]);
+        onErrorsChange([]);
+      } catch (error) {
+        const errors = [error instanceof Error ? error.message : String(error)];
+        onErrorsChange(errors);
+        setValidationErrors(errors);
+      }
+    };
 
-    const handleOptionsChange = useCallback(
-      (options: YamlGeneratorOptions) => {
-        setYamlGeneratorOptions(options);
-        generateYaml(pythonCode, options);
-      },
-      [pythonCode, generateYaml],
-    );
-
-    useEffect(() => {
-      // first time loading
-      generateYaml(text, options);
-    }, []);
+    const handleOptionsChange = (options: YamlGeneratorOptions) => {
+      setYamlGeneratorOptions(options);
+      handleFunctionTextChange(pythonCode);
+    };
 
     return (
       <InlineStack className="w-full h-full" gap="4">

src/components/shared/ComponentEditor/components/PythonComponentEditor.tsx

@@ -1,5 +1,5 @@
 import MonacoEditor from "@monaco-editor/react";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 
 import { withSuspenseWrapper } from "@/components/shared/SuspenseWrapper";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
@@ -23,24 +23,21 @@ export const YamlComponentEditor = withSuspenseWrapper(
     const validateComponentSpec = useComponentSpecValidator();
     const [validationErrors, setValidationErrors] = useState<string[]>([]);
 
-    const handleComponentTextChange = useCallback(
-      (value: string | undefined) => {
-        const validationResult = validateComponentSpec(value ?? "");
+    const handleComponentTextChange = (value: string | undefined) => {
+      const validationResult = validateComponentSpec(value ?? "");
 
-        if (!validationResult.valid) {
-          const errors = validationResult.errors ?? ["Invalid component spec"];
-          setValidationErrors(errors);
-          onErrorsChange(errors);
-          return;
-        }
+      if (!validationResult.valid) {
+        const errors = validationResult.errors ?? ["Invalid component spec"];
+        setValidationErrors(errors);
+        onErrorsChange(errors);
+        return;
+      }
 
-        setComponentText(value ?? "");
-        onComponentTextChange(value ?? "");
-        setValidationErrors([]);
-        onErrorsChange([]);
-      },
-      [onComponentTextChange, validateComponentSpec],
-    );
+      setComponentText(value ?? "");
+      onComponentTextChange(value ?? "");
+      setValidationErrors([]);
+      onErrorsChange([]);
+    };
 
     return (
       <InlineStack className="w-full h-full" gap="4">