Unmount and remount when main URL changes to avoid staleness problems
Brian Vaughn committed
Mar 18, 2019 at 09:36 UTC
e728ebc7b9c38770761fbd5f791c9334518f0131
1 file changed
+12
-5
shells/browser/shared/src/main.js
+12
-5
@@ -1,7 +1,7 @@
1
/* global chrome */
2
3
import { createElement } from 'react';
4
-import { unstable_createRoot as createRoot } from 'react-dom';
4
+import { unstable_createRoot as createRoot, flushSync } from 'react-dom';
5
import Bridge from 'src/bridge';
6
import Store from 'src/devtools/Store';
7
import inject from './inject';
@@ -38,7 +38,9 @@ function createPanelIfReactLoaded() {
38
let settingsPortalContainer = null;
39
40
let cloneStyleTags = null;
41
+ let mostRecentOverrideTab = null;
42
let render = null;
43
+ let root = null;
44
45
function initBridgeAndStore() {
46
let hasPortBeenDisconnected = false;
@@ -68,10 +70,11 @@ function createPanelIfReactLoaded() {
70
71
const viewElementSource = createViewElementSource(bridge, store);
72
71
- const container = document.createElement('div');
72
- const root = createRoot(container);
73
+ root = createRoot(document.createElement('div'));
74
+
75
+ render = (overrideTab = mostRecentOverrideTab) => {
76
+ mostRecentOverrideTab = overrideTab;
77
74
- render = overrideTab => {
78
root.render(
79
createElement(DevTools, {
80
bridge,
@@ -87,6 +90,8 @@ function createPanelIfReactLoaded() {
90
})
91
);
92
};
93
+
94
+ render();
95
}
96
97
cloneStyleTags = () => {
@@ -150,7 +155,9 @@ function createPanelIfReactLoaded() {
155
chrome.devtools.network.onNavigated.addListener(function onNavigated() {
156
bridge.send('shutdown');
157
153
- initBridgeAndStore();
158
+ // It's easiest to recreate the DevTools panel (to clean up potential stale state).
159
+ // We can revisit this in the future as a small optimization.
160
+ flushSync(() => root.unmount(initBridgeAndStore));
161
});
162
}
163
);