refactoring react

Author: Navya

client/start.js

@@ -11,7 +11,7 @@ import { BreakingNews, CLIENT_SIDE_RENDERED, NAVIGATE_TO_PAGE, PAGE_LOADING } fr
 import { createBrowserHistory } from "history";
 import get from "lodash/get";
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot, hydrateRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import { IsomorphicComponent } from "../isomorphic/component";
 import { makePickComponentSync } from "../isomorphic/impl/make-pick-component-sync";
@@ -201,9 +201,14 @@ export function renderComponent(clazz, container, store, props = {}, callback) {
   }
 
   if (props.hydrate) {
-    return ReactDOM.hydrate(component, containerEle, callback);
+    const root = hydrateRoot(containerEle, component);
+    if (typeof callback === "function") callback();
+    return root;
   }
-  return ReactDOM.render(component, containerEle, callback);
+  const root = createRoot(containerEle);
+  root.render(component);
+  if (typeof callback === "function") callback();
+  return root;
 }
 
 /**

package-lock.json

@@ -54,9 +54,9 @@
     "mocha-snapshots": "^4.2.0",
     "morgan": "^1.10.0",
     "path-to-regexp": "^6.2.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-redux": "^7.2.5",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-redux": "^9.1.2",
     "react-router": "^5.2.1",
     "redux": "^4.1.1",
     "request-promise": "^4.2.6",

package.json

@@ -1,8 +1,8 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-undef */
 /* eslint-disable func-names */
-import supertest from "supertest";
-import { ampRoutes } from "../../server/routes";
+const supertest = require("supertest");
+const { ampRoutes } = require("../../server/routes");
 
 const assert = require("assert");
 const express = require("express");

test/integration/amp-handler-test.js

@@ -1,7 +1,7 @@
 /* eslint-disable func-names */
 /* eslint-disable consistent-return */
-import supertest from "supertest";
-import { setCorsHeaders } from "../../../server/amp/helpers";
+const supertest = require("supertest");
+const { setCorsHeaders } = require("../../../server/amp/helpers");
 
 const express = require("express");
 const assert = require("assert");

test/unit/amp/amp-setcorsheaders-test.js

@@ -1,4 +1,4 @@
-import { NAVIGATE_TO_PAGE, SERVICE_WORKER_UPDATED } from "@quintype/components";
+const { NAVIGATE_TO_PAGE, SERVICE_WORKER_UPDATED } = require("@quintype/components");
 
 const assert = require("assert");