Different order for React rendering / DOM ready event in Webkit with React 18

[afdev82]

Steps to reproduce

Expected behavior

The React tree of components should be ready before the DOM ready event gets fired.
I am using jQuery to execute a function after the DOM ready event and set some other event handlers that should change the appearance of some React components.

Actual behavior

In Chrome and Safari browsers, with React 18, React starts to render the components AFTER the DOM ready event is fired.
The result is that some event handlers cannot change the status of the React components (because they are not rendered yet).
Even if I register the event handlers in the React constructor functions, it doesn't help, because the events I am listening on are fired before the event handler is attached to them.

System configuration

• Shakapacker or Sprockets version: Shakapacker v8.0.0 (also with v8.0.1), Sprockets v
• React-Rails version: v3.2.1
• React_UJS version: v3.2.1
• Rails version: v7.1.3.4
• Ruby version: v3.3.3

---

The "bug" is happening after the update to React 18.
Everything was fine with React 17 (in Chrome and Safare React components were available BEFORE the DOM ready event).
In Firefox I don't have this issue, the order is the same between the two versions.
Below the diff of the related part of my Gemfile and package.json.

package.json
+   "react": "^17.0.2",
-    "react-accessible-accordion": "^4.0.0",
-    "react-datepicker": "^4.5.0",
-    "react-dom": "^17.0.2",
-    "react-icons": "^4.3.1",
+    "react": "^18.0.0",
+    "react-accessible-accordion": "^5.0.0",
+    "react-datepicker": "^7.0.0",
+    "react-dom": "^18.0.0",
+    "react-icons": "^5.0.0",
     "react-select": "^5.2.1",
-    "react_ujs": "^2.6.1",
-    "reactstrap": "^8.10.1",
+    "react_ujs": "^3.0.0",
+    "reactstrap": "^9.0.0",

Gemfile
-  react-rails (= 2.7.1)
+  react-rails (= 3.2.1)

I don't know what is the reason for that, I am posting an issue here as a starting point, hoping someone could give me some hints to solve the problem. Thank you very much for any help!

[afdev82]

I have migrated my app to react_on_rails and now I have the same behaviour in Firefox too.
I have changed the application logic to not rely on the event listener to set the initial state of the components (because now I have all what I need to set the state already in the constructor).
The issue could be closed.