From e0688c4865183d9634d0de5f2b3d34ebab18f08e Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 7 May 2024 19:18:57 +0200 Subject: [PATCH] Improve performance of internal `useInertOthers` hook (#3181) * do not use default function for `allowed` and `disallowed` Otherwise the fallback function will be used which will be a new reference on each render. On pages with lots of elements this causes performance issues. * update changelog --- packages/@headlessui-react/CHANGELOG.md | 4 +++- packages/@headlessui-react/src/hooks/use-inert-others.tsx | 8 ++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 3152332e5e..13c8436c91 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Improve performance of internal `useInertOthers` hook ([#3181](https://github.com/tailwindlabs/headlessui/pull/3181)) ## [2.0.1] - 2024-05-06 diff --git a/packages/@headlessui-react/src/hooks/use-inert-others.tsx b/packages/@headlessui-react/src/hooks/use-inert-others.tsx index 6d8e54165e..360851e5cf 100644 --- a/packages/@headlessui-react/src/hooks/use-inert-others.tsx +++ b/packages/@headlessui-react/src/hooks/use-inert-others.tsx @@ -74,8 +74,8 @@ function markNotInert(element: HTMLElement) { */ export function useInertOthers( { - allowed = () => [], - disallowed = () => [], + allowed, + disallowed, }: { allowed?: () => (HTMLElement | null)[]; disallowed?: () => (HTMLElement | null)[] } = {}, enabled = true ) { @@ -85,14 +85,14 @@ export function useInertOthers( let d = disposables() // Mark all disallowed elements as inert - for (let element of disallowed()) { + for (let element of disallowed?.() ?? []) { if (!element) continue d.add(markInert(element)) } // Mark all siblings of allowed elements (and parents) as inert - let allowedElements = allowed() + let allowedElements = allowed?.() ?? [] for (let element of allowedElements) { if (!element) continue