diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 145b20c3..89169afc 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -57,6 +57,7 @@ import {
   getMentions,
 } from '../../components/editor';
 import { EmojiBoard, EmojiBoardTab } from '../../components/emoji-board';
+import { UseStateProvider } from '../../components/UseStateProvider';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import {
   TUploadContent,
@@ -606,34 +607,29 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       </IconButton>
     );
 
-    const closeEmojiBoard = () => {
-      setEmojiBoardTab(undefined);
-      if (!mobileOrTablet()) ReactEditor.focus(editor);
-    };
-
-    const emojiBoard = (
+    // The native dock renders the board in the composer's top slot, so its
+    // open/close state lives here (only read on native). Desktop keeps its
+    // state isolated inside the UseStateProvider below so opening the pop-out
+    // doesn't re-render the whole composer.
+    const dockedEmojiBoard = dockEmojiBoard && emojiBoardTab !== undefined && (
       <EmojiBoard
-        tab={emojiBoardTab ?? EmojiBoardTab.Emoji}
+        tab={emojiBoardTab}
         onTabChange={setEmojiBoardTab}
         imagePackRooms={imagePackRooms}
         returnFocusOnDeactivate={false}
-        dock={dockEmojiBoard}
+        dock
         onEmojiSelect={handleEmoticonSelect}
         onCustomEmojiSelect={handleEmoticonSelect}
         onStickerSelect={handleStickerSelect}
-        requestClose={closeEmojiBoard}
+        requestClose={() => setEmojiBoardTab(undefined)}
       />
     );
 
-    const emojiTriggerButton = (
+    const emojiButton = dockEmojiBoard ? (
       <IconButton
         ref={emojiBtnRef}
         aria-pressed={!!emojiBoardTab}
-        onClick={() =>
-          dockEmojiBoard
-            ? setEmojiBoardTab(emojiBoardTab ? undefined : EmojiBoardTab.Emoji)
-            : setEmojiBoardTab(EmojiBoardTab.Emoji)
-        }
+        onClick={() => setEmojiBoardTab(emojiBoardTab ? undefined : EmojiBoardTab.Emoji)}
         variant="SurfaceVariant"
         fill="None"
         size="300"
@@ -641,27 +637,54 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       >
         <Icon src={StreamComposerIcons.Smile} />
       </IconButton>
-    );
-
-    // Native docks the board inline (rendered in the composer's top slot); the
-    // desktop trigger keeps the floating pop-out anchored to the button.
-    const emojiButton = dockEmojiBoard ? (
-      emojiTriggerButton
     ) : (
-      <PopOut
-        offset={16}
-        alignOffset={-44}
-        position="Top"
-        align="End"
-        anchor={
-          emojiBoardTab === undefined
-            ? undefined
-            : emojiBtnRef.current?.getBoundingClientRect() ?? undefined
-        }
-        content={emojiBoard}
-      >
-        {emojiTriggerButton}
-      </PopOut>
+      <UseStateProvider initial={undefined}>
+        {(emojiTab: EmojiBoardTab | undefined, setEmojiTab) => (
+          <PopOut
+            offset={16}
+            alignOffset={-44}
+            position="Top"
+            align="End"
+            anchor={
+              emojiTab === undefined
+                ? undefined
+                : emojiBtnRef.current?.getBoundingClientRect() ?? undefined
+            }
+            content={
+              <EmojiBoard
+                tab={emojiTab ?? EmojiBoardTab.Emoji}
+                onTabChange={setEmojiTab}
+                imagePackRooms={imagePackRooms}
+                returnFocusOnDeactivate={false}
+                onEmojiSelect={handleEmoticonSelect}
+                onCustomEmojiSelect={handleEmoticonSelect}
+                onStickerSelect={handleStickerSelect}
+                requestClose={() => {
+                  setEmojiTab((tab) => {
+                    if (tab) {
+                      if (!mobileOrTablet()) ReactEditor.focus(editor);
+                      return undefined;
+                    }
+                    return tab;
+                  });
+                }}
+              />
+            }
+          >
+            <IconButton
+              ref={emojiBtnRef}
+              aria-pressed={!!emojiTab}
+              onClick={() => setEmojiTab(EmojiBoardTab.Emoji)}
+              variant="SurfaceVariant"
+              fill="None"
+              size="300"
+              radii="300"
+            >
+              <Icon src={StreamComposerIcons.Smile} />
+            </IconButton>
+          </PopOut>
+        )}
+      </UseStateProvider>
     );
 
     const sendButton = (
@@ -799,7 +822,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           onPaste={handlePaste}
           top={
             <>
-              {dockEmojiBoard && emojiBoardTab !== undefined && emojiBoard}
+              {dockedEmojiBoard}
               {replyDraft && (
                 <div>
                   <Box