@@ -1,6 +1,6 @@
-import { type ComponentProps, useEffect, useMemo, useState } from 'react';
+import { type ComponentProps, useCallback, useEffect, useMemo, useState } from 'react';
 import { MessageComposer as MessageComposerController } from 'stream-chat';
-import type { MessageComposerState } from 'stream-chat';
+import type { LocalMessage, MessageComposerState } from 'stream-chat';
 import {
   asDynamicKey,
   ContextMenuButton,
@@ -12,7 +12,6 @@ import {
   MessageComposer,
   MessageComposerControllerProvider,
   type MessageUIComponentProps,
-  useChannel,
   useChatContext,
   useComponentContext,
   useContextMenuContext,
@@ -43,36 +42,54 @@ const editingSelector = (state: MessageComposerState) => ({
 });
 
 /**
- * Swaps a message for a `MessageComposer` in place, editing it through a composer this component
- * owns and supplies with `MessageComposerControllerProvider` - so the channel's own composer, and
- * whatever the user was typing into it, are left alone.
+ * Swaps a message for a `MessageComposer` in place, editing it through a composer of its own
+ * supplied with `MessageComposerControllerProvider` - so the channel's own composer, and whatever
+ * the user was typing into it, are left alone. That composer is kept in the client's composer cache
+ * under the message's tag, so an unfinished edit outlives this row.
  */
 export const InlineEditableMessage = (props: MessageUIComponentProps) => {
   const { client } = useChatContext();
-  const channel = useChannel();
+  const { message } = useMessageContext();
   const surface: MessageActionSurface = useThreadContext() ? 'thread' : 'channel';
   const { customMessageActions } = useAppSettingsSelector(
     (state) => state.messageActions,
   );
   const inlineEditEnabled = customMessageActions[surface].inlineEdit;
   const { MessageActions: OuterMessageActions = MessageActions } = useComponentContext();
 
-  // Drafts off: an edit is not a draft, and the channel's draft must not leak into this composer.
-  const [editingComposer] = useState(
-    () =>
-      new MessageComposerController({
-        client,
-        compositionContext: channel,
-        config: { drafts: { enabled: false } },
-      }),
+  // Only looks - a row nobody edits creates nothing. A composer found here holding an edit is one
+  // left unfinished while this row was unmounted, so the editor comes straight back.
+  const [editingComposer, setEditingComposer] = useState(() =>
+    client.messageComposerCache.peek(MessageComposerController.constructTag(message)),
   );
 
-  const { editing } = useStateStore(editingComposer.state, editingSelector);
+  const { editing } = useStateStore(editingComposer?.state, editingSelector) ?? {
+    editing: false,
+  };
+
+  // Entering edit mode is where the composer is created if missing, and stored at once.
+  const startEditing = useCallback(
+    (messageToEdit: LocalMessage) => {
+      const tag = MessageComposerController.constructTag(messageToEdit);
+      const composer =
+        client.messageComposerCache.peek(tag) ??
+        // Drafts off: an edit is not a draft.
+        new MessageComposerController({
+          client,
+          compositionContext: messageToEdit,
+          config: { drafts: { enabled: false } },
+        });
+      client.messageComposerCache.add(tag, composer);
+      composer.initState({ composition: messageToEdit });
+      setEditingComposer(composer);
+    },
+    [client],
+  );
 
   // Turning the setting off mid-edit abandons the edit, rather than leaving the message stuck as a
   // composer with no way back.
   useEffect(() => {
-    if (!inlineEditEnabled && editing) editingComposer.clear();
+    if (!inlineEditEnabled && editing) editingComposer?.clear();
   }, [editing, editingComposer, inlineEditEnabled]);
 
   const MessageActionsWithInlineEdit = useMemo(() => {
@@ -90,7 +107,7 @@ export const InlineEditableMessage = (props: MessageUIComponentProps) => {
           className='str-chat__message-actions-list-item-button'
           Icon={IconEdit}
           onClick={() => {
-            editingComposer.initState({ composition: message });
+            startEditing(message);
             closeMenu();
           }}
         >
@@ -121,15 +138,18 @@ export const InlineEditableMessage = (props: MessageUIComponentProps) => {
     };
     Component.displayName = 'MessageActionsWithInlineEdit';
     return Component;
-  }, [OuterMessageActions, editingComposer]);
+  }, [OuterMessageActions, startEditing]);
 
   if (!inlineEditEnabled) return <DefaultMessageUI {...props} />;
 
-  if (editing) {
+  if (editing && editingComposer) {
     return (
       <MessageComposerControllerProvider messageComposerController={editingComposer}>
         <div className='app__inline-edit-message'>
-          {/* Cancelling is the ✕ on the composer's edit preview, which clears the composer. */}
+          {/* The composer outlives this editor: leaving the channel, or scrolling the row away in a
+              virtualized message list, unmounts the editor, and `MessageComposer` never clears a
+              supplied composer on unmount - so the unfinished edit is still there on return.
+              Cancelling is the ✕ on the edit preview, which clears it on purpose. */}
           <MessageComposer />
         </div>
       </MessageComposerControllerProvider>