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

Author: RobinMalfait

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
 

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