Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e6c3def

Browse files
committed
perf(CDropdown): improve performance with useMemo for context and cleanup on unmount
1 parent b06b99d commit e6c3def

File tree

5 files changed

+44
-14
lines changed

5 files changed

+44
-14
lines changed

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

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -276,6 +276,14 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
276276
}
277277
}, [visible])
278278

279+
useEffect(() => {
280+
return () => {
281+
if (_visible) {
282+
handleHide()
283+
}
284+
}
285+
}, [])
286+
279287
useEffect(() => {
280288
const referenceElement = getReferenceElement(reference, dropdownToggleElement, dropdownRef)
281289
const menuElement = dropdownMenuRef.current
@@ -371,7 +379,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
371379
(autoClose === 'inside' && isOnMenu) ||
372380
(autoClose === 'outside' && !isOnMenu)
373381
) {
374-
setTimeout(()=>handleHide(),1)
382+
handleHide()
375383
}
376384
},
377385
[autoClose, dropdownToggleElement, handleHide]
@@ -417,19 +425,34 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
417425
]
418426
)
419427

420-
const contextValues = {
421-
alignment,
422-
container,
423-
dark,
424-
dropdownMenuRef,
425-
dropdownToggleRef,
426-
handleHide,
427-
handleShow,
428-
popper: allowPopperUse,
429-
portal,
430-
variant,
431-
visible: _visible,
432-
}
428+
const contextValues = useMemo(
429+
() => ({
430+
alignment,
431+
container,
432+
dark,
433+
dropdownMenuRef,
434+
dropdownToggleRef,
435+
handleHide,
436+
handleShow,
437+
popper: allowPopperUse,
438+
portal,
439+
variant,
440+
visible: _visible,
441+
}),
442+
[
443+
alignment,
444+
container,
445+
dark,
446+
dropdownMenuRef,
447+
dropdownToggleRef,
448+
handleHide,
449+
handleShow,
450+
allowPopperUse,
451+
portal,
452+
variant,
453+
_visible,
454+
]
455+
)
433456

434457
return (
435458
<CDropdownContext.Provider value={contextValues}>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export interface CDropdownHeaderProps extends HTMLAttributes<HTMLHeadingElement>
99
* Component used for the root node. Either a string to use a HTML element or a component.
1010
*/
1111
as?: ElementType
12+
1213
/**
1314
* A string of all className you want applied to the component.
1415
*/

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export interface CDropdownItemPlainProps extends HTMLAttributes<HTMLSpanElement>
99
* Component used for the root node. Either a string to use a HTML element or a component.
1010
*/
1111
as?: ElementType
12+
1213
/**
1314
* A string of all className you want applied to the component.
1415
*/

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTML
1515
* Component used for the root node. Either a string to use a HTML element or a component.
1616
*/
1717
as?: ElementType
18+
1819
/**
1920
* A string of all className you want applied to the base component.
2021
*/

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,27 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
1313
* Enables pseudo element caret on toggler.
1414
*/
1515
caret?: boolean
16+
1617
/**
1718
* Create a custom toggler which accepts any content.
1819
*/
1920
custom?: boolean
21+
2022
/**
2123
* If a dropdown `variant` is set to `nav-item` then render the toggler as a
2224
* link instead of a button.
2325
*
2426
* @since 5.0.0
2527
*/
2628
navLink?: boolean
29+
2730
/**
2831
* Similarly, create split button dropdowns with virtually the same markup as
2932
* single button dropdowns, but with the addition of `.dropdown-toggle-split`
3033
* className for proper spacing around the dropdown caret.
3134
*/
3235
split?: boolean
36+
3337
/**
3438
* Sets which event handlers you'd like provided to your toggle prop. You can
3539
* specify one trigger or an array of them.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /