pl-fe: optimizations

Signed-off-by: mkljczk <git@mkljczk.pl>

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({

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', {