From 9b1dee6314e96fb9186e769a8de007b3143aac9d Mon Sep 17 00:00:00 2001
From: Koen Vlaswinkel <koesie10@github.com>
Date: Mon, 13 Mar 2023 16:41:26 +0100
Subject: [PATCH] Enable React strict mode

This enables React strict mode which will print extra warnings to the
console when we use certain constructs incorrectly. This does not affect
production builds.

See https://beta.reactjs.org/reference/react/StrictMode
---
 extensions/ql-vscode/src/view/webview.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/extensions/ql-vscode/src/view/webview.tsx b/extensions/ql-vscode/src/view/webview.tsx
index a2f8a6f473d..4698a33d867 100644
--- a/extensions/ql-vscode/src/view/webview.tsx
+++ b/extensions/ql-vscode/src/view/webview.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { vscode } from "./vscode-api";
 
@@ -27,10 +28,12 @@ const render = () => {
   const view: WebviewDefinition = require(`./${viewName}/index.tsx`).default;
 
   createRoot(element).render(
-    // Post a message to the extension when fully loaded. See https://github.com/reactwg/react-18/discussions/5 ("What about the render callback?")
-    <div ref={() => vscode.postMessage({ t: "viewLoaded", viewName })}>
-      {view.component}
-    </div>,
+    <StrictMode>
+      {/* Post a message to the extension when fully loaded. See https://github.com/reactwg/react-18/discussions/5 ("What about the render callback?")*/}
+      <div ref={() => vscode.postMessage({ t: "viewLoaded", viewName })}>
+        {view.component}
+      </div>
+    </StrictMode>,
   );
 };