Skip to content

Commit

Permalink
Improve performance of internal useInertOthers hook (#3181)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
RobinMalfait authored May 7, 2024
1 parent 886fdf7 commit e0688c4
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 5 deletions.
4 changes: 3 additions & 1 deletion packages/@headlessui-react/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
8 changes: 4 additions & 4 deletions packages/@headlessui-react/src/hooks/use-inert-others.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@ function markNotInert(element: HTMLElement) {
*/
export function useInertOthers(
{
allowed = () => [],
disallowed = () => [],
allowed,
disallowed,
}: { allowed?: () => (HTMLElement | null)[]; disallowed?: () => (HTMLElement | null)[] } = {},
enabled = true
) {
Expand All @@ -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
Expand Down

0 comments on commit e0688c4

Please sign in to comment.