From ee202d6e532477ccbcc4122428063d3483c871cf Mon Sep 17 00:00:00 2001
From: Jeremiah <42397676+jlsnow301@users.noreply.github.com>
Date: Fri, 12 Jan 2024 17:04:56 -0800
Subject: [PATCH] Fixes react version warning (#80920)

## About The Pull Request

![image](https://github.com/tgstation/tgstation/assets/42397676/0058532e-0cbe-4ad6-8449-7d0407fa3c86)

[https://reactjs.org/link/switch-to-createroot](https://reactjs.org/link/switch-to-createroot)
## Why It's Good For The Game
Fixes #80432
## Changelog
N/A

---------

Co-authored-by: Mothblocks <35135081+Mothblocks@users.noreply.github.com>
---
 tgui/.eslintrc.yml                        |  2 +-
 tgui/packages/tgui/components/Tooltip.tsx |  2 ++
 tgui/packages/tgui/renderer.ts            | 14 ++++++++------
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/tgui/.eslintrc.yml b/tgui/.eslintrc.yml
index 24ba4c47fbd..92dfe1320cb 100644
--- a/tgui/.eslintrc.yml
+++ b/tgui/.eslintrc.yml
@@ -17,7 +17,7 @@ plugins:
   - simple-import-sort
 settings:
   react:
-    version: '16.10'
+    version: '18.2'
 rules:
   ## Possible Errors
   ## ----------------------------------------
diff --git a/tgui/packages/tgui/components/Tooltip.tsx b/tgui/packages/tgui/components/Tooltip.tsx
index e824ccf734f..f3936f32c66 100644
--- a/tgui/packages/tgui/components/Tooltip.tsx
+++ b/tgui/packages/tgui/components/Tooltip.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable react/no-deprecated */
+// TODO: Rewrite as an FC, remove this lint disable
 import { createPopper, Placement, VirtualElement } from '@popperjs/core';
 import { Component, ReactNode } from 'react';
 import { findDOMNode, render } from 'react-dom';
diff --git a/tgui/packages/tgui/renderer.ts b/tgui/packages/tgui/renderer.ts
index 0d299b149d3..bbdfeffc165 100644
--- a/tgui/packages/tgui/renderer.ts
+++ b/tgui/packages/tgui/renderer.ts
@@ -1,11 +1,12 @@
 import { perf } from 'common/perf';
-import { render } from 'react-dom';
+import { ReactNode } from 'react';
+import { createRoot, Root } from 'react-dom/client';
 
 import { createLogger } from './logging';
 
 const logger = createLogger('renderer');
 
-let reactRoot: any;
+let reactRoot: Root;
 let initialRender: string | boolean = true;
 let suspended = false;
 
@@ -20,7 +21,7 @@ export const suspendRenderer = () => {
 };
 
 type CreateRenderer = <T extends unknown[] = [unknown]>(
-  getVNode?: (...args: T) => any,
+  getVNode?: (...args: T) => ReactNode,
 ) => (...args: T) => void;
 
 enum Render {
@@ -33,13 +34,14 @@ export const createRenderer: CreateRenderer = (getVNode) => (...args) => {
   perf.mark(Render.Start);
   // Start rendering
   if (!reactRoot) {
-    reactRoot = document.getElementById('react-root');
+    const element = document.getElementById('react-root');
+    reactRoot = createRoot(element!);
   }
   if (getVNode) {
-    render(getVNode(...args), reactRoot);
+    reactRoot.render(getVNode(...args));
   }
   else {
-    render(args[0] as any, reactRoot);
+    reactRoot.render(args[0] as any);
   }
   perf.mark(Render.Finish);
   if (suspended) {