perf(CDropdown): improve performance with useMemo for context and cleanup on unmount

Author: mrholek

packages/coreui-react/src/components/dropdown/CDropdown.tsx

@@ -276,6 +276,14 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       }
     }, [visible])
 
+    useEffect(() => {
+      return () => {
+        if (_visible) {
+          handleHide()
+        }
+      }
+    }, [])
+
     useEffect(() => {
       const referenceElement = getReferenceElement(reference, dropdownToggleElement, dropdownRef)
       const menuElement = dropdownMenuRef.current
@@ -371,7 +379,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
           (autoClose === 'inside' && isOnMenu) ||
           (autoClose === 'outside' && !isOnMenu)
         ) {
-          setTimeout(() => handleHide(), 1)
+          handleHide()
         }
       },
       [autoClose, dropdownToggleElement, handleHide]
@@ -417,19 +425,34 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       ]
     )
 
-    const contextValues = {
-      alignment,
-      container,
-      dark,
-      dropdownMenuRef,
-      dropdownToggleRef,
-      handleHide,
-      handleShow,
-      popper: allowPopperUse,
-      portal,
-      variant,
-      visible: _visible,
-    }
+    const contextValues = useMemo(
+      () => ({
+        alignment,
+        container,
+        dark,
+        dropdownMenuRef,
+        dropdownToggleRef,
+        handleHide,
+        handleShow,
+        popper: allowPopperUse,
+        portal,
+        variant,
+        visible: _visible,
+      }),
+      [
+        alignment,
+        container,
+        dark,
+        dropdownMenuRef,
+        dropdownToggleRef,
+        handleHide,
+        handleShow,
+        allowPopperUse,
+        portal,
+        variant,
+        _visible,
+      ]
+    )
 
     return (
       <CDropdownContext.Provider value={contextValues}>

packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx

@@ -9,6 +9,7 @@ export interface CDropdownHeaderProps extends HTMLAttributes<HTMLHeadingElement>
    * Component used for the root node. Either a string to use a HTML element or a component.
    */
   as?: ElementType
+
   /**
    * A string of all className you want applied to the component.
    */

packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx

@@ -9,6 +9,7 @@ export interface CDropdownItemPlainProps extends HTMLAttributes<HTMLSpanElement>
    * Component used for the root node. Either a string to use a HTML element or a component.
    */
   as?: ElementType
+
   /**
    * A string of all className you want applied to the component.
    */

packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx

@@ -15,6 +15,7 @@ export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTML
    * Component used for the root node. Either a string to use a HTML element or a component.
    */
   as?: ElementType
+
   /**
    * A string of all className you want applied to the base component.
    */

packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx

@@ -13,23 +13,27 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
    * Enables pseudo element caret on toggler.
    */
   caret?: boolean
+
   /**
    * Create a custom toggler which accepts any content.
    */
   custom?: boolean
+
   /**
    * If a dropdown `variant` is set to `nav-item` then render the toggler as a
    * link instead of a button.
    *
    * @since 5.0.0
    */
   navLink?: boolean
+
   /**
    * Similarly, create split button dropdowns with virtually the same markup as
    * single button dropdowns, but with the addition of `.dropdown-toggle-split`
    * className for proper spacing around the dropdown caret.
    */
   split?: boolean
+
   /**
    * Sets which event handlers you'd like provided to your toggle prop. You can
    * specify one trigger or an array of them.