From dfa73a5c467d6ddda6fa1b5e91aecdeb659b3ca4 Mon Sep 17 00:00:00 2001
From: mkljczk <git@mkljczk.pl>
Date: Tue, 7 Jan 2025 20:00:35 +0100
Subject: [PATCH] pl-fe: optimizations

Signed-off-by: mkljczk <git@mkljczk.pl>
---
 .../components/dropdown-menu/dropdown-menu.tsx |  4 ++--
 .../emoji-picker-dropdown-container.tsx        | 18 ++++++++++--------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
index 0676b5ee3..3b21ea994 100644
--- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
@@ -317,7 +317,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
       onKeyPress: handleKeyPress,
       ref: refs.setReference,
     });
-  }, [children]);
+  }, [children, !!items?.length, component]);
 
   if (items?.length === 0 && !component) {
     return null;
@@ -343,7 +343,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
 
   return (
     <>
-      {children ? clonedChildren : (
+      {clonedChildren || (
         <IconButton
           disabled={disabled}
           className={clsx({
diff --git a/packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx b/packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
index d042ef3b2..70e55b213 100644
--- a/packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
+++ b/packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
@@ -1,6 +1,6 @@
 import { useFloating, shift, flip, autoUpdate } from '@floating-ui/react';
 import clsx from 'clsx';
-import React, { KeyboardEvent, useState } from 'react';
+import React, { KeyboardEvent, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import IconButton from 'pl-fe/components/ui/icon-button';
@@ -46,15 +46,17 @@ const EmojiPickerDropdownContainer: React.FC<IEmojiPickerDropdownContainer> = ({
     }
   };
 
+  const clonedChildren = useMemo(() => children ? (
+    React.cloneElement(children, {
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ref: refs.setReference,
+    })
+  ) : null, [children]);
+
   return (
     <div className='relative'>
-      {children ? (
-        React.cloneElement(children, {
-          onClick: handleClick,
-          onKeyDown: handleKeyDown,
-          ref: refs.setReference,
-        })
-      ) : (
+      {clonedChildren || (
         <IconButton
           theme='transparent'
           className={clsx('emoji-picker-dropdown -m-1 p-2', {