Backport useId tracking fix to React 18

A hydration error occurs when using `useId` with a parent that has a render phase update. This has already been fixed in React 19 by facebook#25713. React 18 will have users for some time, and this issue is showing up in production. Therefore, this backports that fix to React 18. Fixes facebook#31653.
kognise · Dec 4, 2024 · babdf2e · babdf2e
1 parent f1338f8
commit babdf2e
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 2 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -440,7 +440,6 @@ export function renderWithHooks<Props, SecondArg>(
     let numberOfReRenders: number = 0;
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
-      localIdCounter = 0;
 
       if (numberOfReRenders >= RE_RENDER_LIMIT) {
         throw new Error(

diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -439,7 +439,7 @@ export function renderWithHooks<Props, SecondArg>(
     let numberOfReRenders: number = 0;
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
-      localIdCounter = 0;
+      // localIdCounter = 0;
 
       if (numberOfReRenders >= RE_RENDER_LIMIT) {
         throw new Error(