diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index f4150c75570fc..664b65bf7d7a8 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -1206,6 +1206,14 @@ export default class Store extends EventEmitter<{ } set.add(id); } + + const suspense = this._idToSuspense.get(id); + if (suspense !== undefined) { + // We're reconnecting a node. + if (suspense.name === null) { + suspense.name = this._guessSuspenseName(element); + } + } } break; } @@ -1432,21 +1440,12 @@ export default class Store extends EventEmitter<{ const element = this._idToElement.get(id); if (element === undefined) { - this._throwAndEmitError( - Error( - `Cannot add suspense node "${id}" because no matching element was found in the Store.`, - ), - ); + // This element isn't connected yet. } else { if (name === null) { // The boundary isn't explicitly named. // Pick a sensible default. - // TODO: Use key - const owner = this._idToElement.get(element.ownerID); - if (owner !== undefined) { - // TODO: This is clowny - name = `${owner.displayName || 'Unknown'}>?`; - } + name = this._guessSuspenseName(element); } } @@ -1936,4 +1935,15 @@ export default class Store extends EventEmitter<{ // and for unit testing the Store itself. throw error; } + + _guessSuspenseName(element: Element): string | null { + // TODO: Use key + const owner = this._idToElement.get(element.ownerID); + if (owner !== undefined) { + // TODO: This is clowny + return `${owner.displayName || 'Unknown'}>?`; + } + + return null; + } }