What?

Fixes #39044

Why?

useNoRecursiveRenders has an issue where it can cause a 'remount' of a child element. The underlying DOM elements are removed and re-added, which can cause side-effects like focus loss.

This happens because the hook returns a RecursionProvider component, but it doesn't always return the same reference to the component. When the uniqueId argument changes, a new function reference is returned for RecursionProvider.

During the reconciliation phase, React thinks this function with a different reference is a completely new component, so the DOM updates aren't optimized in the way they are when the component is the same across renders.

How?

The API is changed. There's now a hook useHasRecursion and a provider RecursionProvider that are exported.

The key difference is that both need to passed the same id, so there's a small amount of extra work for the implementor.

Testing Instructions

I couldn't find a way to add automated tests that show this problem, but I'll keep trying.

Here's a way to test manually, but it involves cherry-picking a commit to exploit the problem:

Reproduce the issue in trunk

1. Checkout trunk and cherry-pick commit 6e40ab0
2. Build the codebase
3. Load the site editor
4. Select a navigation block.
5. From the toolbar open the Select Menu dropdown and change menu (oh yeah, you'll need multiple navigation menus)
6. Observe that the dropdown closes and focus is lost.
7. Do git reset --hard origin/trunk to remove the cherry-picked commit.

Test that the issue is solved in this branch

1. Checkout this branch` and cherry-pick commit 6e40ab0
2. Build the codebase
3. Load the site editor
4. Select a navigation block.
5. From the toolbar open the Select Menu dropdown and change menu (oh yeah, you'll need multiple navigation menus)
6. Observe that the dropdown stays open and focus is kept

Screenshots or screencast

Before (when 6e40ab0 is applied)

After (when 6e40ab0 is applied)