diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -84,6 +84,7 @@
 type Props = {
   ...BaseProps,
   +activeChatThreadID: ?string,
+  +drafts: { +[key: string]: string },
   +viewerID: ?string,
   +messageStoreMessages: { +[id: string]: RawMessageInfo },
   +exifRotate: boolean,
@@ -117,12 +118,15 @@
   +pendingUploads: {
     [threadID: string]: { [localUploadID: string]: PendingMultimediaUpload },
   },
-  +drafts: { [threadID: string]: string },
+};
+
+type PropsAndState = {
+  ...Props,
+  ...State,
 };
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
-    drafts: {},
   };
   replyCallbacks: Array<(message: string) => void> = [];
   pendingThreadCreations = new Map<string, Promise<string>>();
@@ -146,7 +150,7 @@
 
   static getDerivedStateFromProps(props: Props, state: State) {
     const drafts = InputStateContainer.reassignToRealizedThreads(
-      state.drafts,
+      props.drafts,
       props,
     );
     const pendingUploads = InputStateContainer.reassignToRealizedThreads(
@@ -159,9 +163,6 @@
     }
 
     const stateUpdate = {};
-    if (drafts) {
-      stateUpdate.drafts = drafts;
-    }
     if (pendingUploads) {
       stateUpdate.pendingUploads = pendingUploads;
     }
@@ -449,8 +450,8 @@
 
   inputStateSelector = _memoize((threadID: string) =>
     createSelector(
-      (state: State) => state.pendingUploads[threadID],
-      (state: State) => state.drafts[threadID],
+      (propsAndState: PropsAndState) => propsAndState.pendingUploads[threadID],
+      (propsAndState: PropsAndState) => propsAndState.drafts[threadID],
       (
         pendingUploads: ?{ [localUploadID: string]: PendingMultimediaUpload },
         draft: ?string,
@@ -1055,14 +1056,13 @@
   }
 
   setDraft(threadID: string, draft: string) {
-    this.setState(prevState => {
-      const newThreadID = this.getRealizedOrPendingThreadID(threadID);
-      return {
-        drafts: {
-          ...prevState.drafts,
-          [newThreadID]: draft,
-        },
-      };
+    const newThreadID = this.getRealizedOrPendingThreadID(threadID);
+    this.props.dispatch({
+      type: 'UPDATE_DRAFT',
+      payload: {
+        key: newThreadID,
+        text: draft,
+      },
     });
   }
 
@@ -1212,7 +1212,10 @@
   render() {
     const { activeChatThreadID } = this.props;
     const inputState = activeChatThreadID
-      ? this.inputStateSelector(activeChatThreadID)(this.state)
+      ? this.inputStateSelector(activeChatThreadID)({
+          ...this.state,
+          ...this.props,
+        })
       : null;
     return (
       <InputStateContext.Provider value={inputState}>
@@ -1233,6 +1236,7 @@
     const activeChatThreadID = useSelector(
       state => state.navInfo.activeChatThreadID,
     );
+    const drafts = useSelector(state => state.draftStore.drafts);
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
@@ -1273,6 +1277,7 @@
       <InputStateContainer
         {...props}
         activeChatThreadID={activeChatThreadID}
+        drafts={drafts}
         viewerID={viewerID}
         messageStoreMessages={messageStoreMessages}
         exifRotate={exifRotate}
diff --git a/web/root.js b/web/root.js
--- a/web/root.js
+++ b/web/root.js
@@ -18,7 +18,7 @@
 const persistConfig = {
   key: 'root',
   storage,
-  whitelist: ['enabledApps', 'deviceID'],
+  whitelist: ['enabledApps', 'deviceID', 'draftStore'],
   version: 0,
 };