WIP

React 18 Suspense does not seem to work with our router

agir/donations/components/donationForm/index.js

@@ -30,10 +30,6 @@ function getChoices(select) {
   return choices;
 }
 
-const render = (widget, element) => {
-  renderReactComponent(widget, element);
-};
-
 const replaceForm = (selector) => {
   const form = document.querySelector(selector);
   if (!form) {
@@ -89,7 +85,7 @@ const replaceForm = (selector) => {
   form.parentNode.removeChild(form);
   // remove all children of the form
 
-  render(<DonationForm {...props} />, reactDiv);
+  renderReactComponent(<DonationForm {...props} />, reactDiv);
 };
 
 onDOMReady(() => replaceForm("form.donation-form"));

agir/front/components/app/Footer/index.js

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React, { Suspense, useMemo } from "react";
 import { useLocation } from "react-router-dom";
 

agir/lib/components/utils/react.js

@@ -1,5 +1,5 @@
 import isPropValid from "@emotion/is-prop-valid";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 
@@ -73,10 +73,21 @@ RootComponent.propTypes = {
   fieldProps: PropTypes.object,
 };
 
-export const renderReactComponent = (component, node) => {
-  node &&
-    ReactDOM.render(<React.StrictMode>{component}</React.StrictMode>, node);
-};
+export const renderReactComponent = (
+  (roots = []) =>
+  (component, node) => {
+    if (!node) {
+      return;
+    }
+    let root = roots.find((r) => r.node === node)?.root;
+    if (!root) {
+      root = createRoot(node);
+      roots.push({ root, node });
+    }
+
+    root.render(<React.StrictMode>{component}</React.StrictMode>);
+  }
+)();
 
 export const mergeRefs = (...refs) => {
   const filteredRefs = refs.filter(Boolean);
@@ -96,4 +107,4 @@ export const mergeRefs = (...refs) => {
 export const validProps = (props) =>
   Object.entries(props)
     .filter(([k]) => isPropValid(k))
-    .reduce((o, [k, v]) => ({ ...o, k: v }), {});
+    .reduce((o, [_k, v]) => ({ ...o, k: v }), {});

jest/setup.js

@@ -1 +1,6 @@
+<<<<<<< Updated upstream
 import "@testing-library/jest-dom/jest-globals";
+=======
+import "@testing-library/jest-dom/extend-expect";
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+>>>>>>> Stashed changes