fix query builder updated only first selected field in query editor due recent enabled react-compiler (#3837)

* a

* a

Author: dimaMachina

.changeset/long-parents-grow.md

@@ -0,0 +1,6 @@
+---
+'@graphiql/react': patch
+'@graphiql/plugin-explorer': patch
+---
+
+fix query builder updated only first selected field in query editor due recent enabled react-compiler

packages/graphiql-react/src/editor/hooks.ts

@@ -3,7 +3,8 @@ import type { EditorChange, EditorConfiguration } from 'codemirror';
 import type { SchemaReference } from 'codemirror-graphql/utils/SchemaReference';
 import copyToClipboard from 'copy-to-clipboard';
 import { parse, print } from 'graphql';
-import { useEffect, useRef, useState } from 'react';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports -- TODO: check why query builder update only 1st field https://github.com/graphql/graphiql/issues/3836
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useExplorerContext } from '../explorer';
 import { usePluginContext } from '../plugin';
@@ -344,9 +345,8 @@ export function useAutoCompleteLeafs({
 
 // https://react.dev/learn/you-might-not-need-an-effect
 
-export const useEditorState = (
-  editor: 'query' | 'variable' | 'header',
-): [string, (val: string) => void] => {
+export const useEditorState = (editor: 'query' | 'variable' | 'header') => {
+  'use no memo'; // eslint-disable-line react-compiler/react-compiler -- TODO: check why query builder update only 1st field https://github.com/graphql/graphiql/issues/3836
   const context = useEditorContext({
     nonNull: true,
   });
@@ -358,8 +358,14 @@ export const useEditorState = (
     valueString = editorValue;
   }
 
-  const handleEditorValue = (value: string) => editorInstance?.setValue(value);
-  return [valueString, handleEditorValue];
+  const handleEditorValue = useCallback(
+    (value: string) => editorInstance?.setValue(value),
+    [editorInstance],
+  );
+  return useMemo<[string, (val: string) => void]>(
+    () => [valueString, handleEditorValue],
+    [valueString, handleEditorValue],
+  );
 };
 
 /**