diff --git a/packages/graphiql-react/src/editor/context.tsx b/packages/graphiql-react/src/editor/context.tsx
index 73301d25339..d73b5c388b6 100644
--- a/packages/graphiql-react/src/editor/context.tsx
+++ b/packages/graphiql-react/src/editor/context.tsx
@@ -7,7 +7,14 @@ import {
   visit,
 } from 'graphql';
 import { VariableToType } from 'graphql-language-service';
-import { ReactNode, useCallback, useMemo, useState } from 'react';
+import {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { useStorageContext } from '../storage';
 import { createContextHook, createNullableContext } from '../utility/context';
@@ -336,6 +343,14 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
     [storage, tabState, headerEditor],
   );
 
+  const lastShouldPersistHeadersProp = useRef<boolean | undefined>(undefined);
+  useEffect(() => {
+    const propValue = Boolean(props.shouldPersistHeaders);
+    if (lastShouldPersistHeadersProp.current !== propValue) {
+      setShouldPersistHeaders(propValue);
+    }
+  }, [props.shouldPersistHeaders, setShouldPersistHeaders]);
+
   const synchronizeActiveTabValues = useSynchronizeActiveTabValues({
     queryEditor,
     variableEditor,