diff --git a/packages/graphiql-react/src/editor/components/header-editor.tsx b/packages/graphiql-react/src/editor/components/header-editor.tsx
index 22beee38bfb..dd3acdad175 100644
--- a/packages/graphiql-react/src/editor/components/header-editor.tsx
+++ b/packages/graphiql-react/src/editor/components/header-editor.tsx
@@ -1,3 +1,6 @@
+import { useEffect } from 'react';
+
+import { useEditorContext } from '../context';
 import { useHeaderEditor, UseHeaderEditorArgs } from '../header-editor';
 
 import '../style/codemirror.css';
@@ -7,7 +10,18 @@ import '../style/editor.css';
 type HeaderEditorProps = UseHeaderEditorArgs & { isHidden?: boolean };
 
 export function HeaderEditor({ isHidden, ...hookArgs }: HeaderEditorProps) {
+  const { headerEditor } = useEditorContext({
+    nonNull: true,
+    caller: HeaderEditor,
+  });
   const ref = useHeaderEditor(hookArgs);
+
+  useEffect(() => {
+    if (headerEditor && !isHidden) {
+      headerEditor.refresh();
+    }
+  }, [headerEditor, isHidden]);
+
   return (
     <div className={`graphiql-editor${isHidden ? ' hidden' : ''}`} ref={ref} />
   );
diff --git a/packages/graphiql-react/src/editor/components/variable-editor.tsx b/packages/graphiql-react/src/editor/components/variable-editor.tsx
index 162987473f0..81c0b4395f6 100644
--- a/packages/graphiql-react/src/editor/components/variable-editor.tsx
+++ b/packages/graphiql-react/src/editor/components/variable-editor.tsx
@@ -1,3 +1,6 @@
+import { useEffect } from 'react';
+
+import { useEditorContext } from '../context';
 import { useVariableEditor, UseVariableEditorArgs } from '../variable-editor';
 
 import '../style/codemirror.css';
@@ -11,7 +14,18 @@ type VariableEditorProps = UseVariableEditorArgs & {
 };
 
 export function VariableEditor({ isHidden, ...hookArgs }: VariableEditorProps) {
+  const { variableEditor } = useEditorContext({
+    nonNull: true,
+    caller: VariableEditor,
+  });
   const ref = useVariableEditor(hookArgs);
+
+  useEffect(() => {
+    if (variableEditor && !isHidden) {
+      variableEditor.refresh();
+    }
+  }, [variableEditor, isHidden]);
+
   return (
     <div className={`graphiql-editor${isHidden ? ' hidden' : ''}`} ref={ref} />
   );
diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
index a00ccf03a57..adb97c23c78 100644
--- a/packages/graphiql/src/components/GraphiQL.tsx
+++ b/packages/graphiql/src/components/GraphiQL.tsx
@@ -827,14 +827,9 @@ class GraphiQLWithContext extends React.Component<
                                 null,
                               );
                             }
-                            this.setState(
-                              {
-                                activeSecondaryEditor: 'variable',
-                              },
-                              () => {
-                                this.props.editorContext.variableEditor?.refresh();
-                              },
-                            );
+                            this.setState({
+                              activeSecondaryEditor: 'variable',
+                            });
                           }}
                         >
                           Variables
@@ -855,14 +850,9 @@ class GraphiQLWithContext extends React.Component<
                                   null,
                                 );
                               }
-                              this.setState(
-                                {
-                                  activeSecondaryEditor: 'header',
-                                },
-                                () => {
-                                  this.props.editorContext.headerEditor?.refresh();
-                                },
-                              );
+                              this.setState({
+                                activeSecondaryEditor: 'header',
+                              });
                             }}
                           >
                             Headers