fix: rerender issue with react 19

Author: valcol

__tests__/client/index.js

@@ -34,11 +34,16 @@ describe("With SSR", () => {
     const ComponentWithHydrationOnDemandClient =
       withHydrationOnDemand()(Component);
 
-    render(<ComponentWithHydrationOnDemandClient label={clientSideText} />, {
+    const { rerender, getByText } = render(<ComponentWithHydrationOnDemandClient label={clientSideText} />, {
       container: elem,
       hydrate: true,
     });
 
+    expect(getByText(serverSideText)).toBeTruthy();
+
+    rerender(<ComponentWithHydrationOnDemandClient label={clientSideText} />);
+
+    expect(getByText(serverSideText)).toBeTruthy();
     expect(elem).toMatchSnapshot();
   });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hydration-on-demand",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Hydrate your React components only when you need to",
   "main": "dist/index.js",
   "files": [

src/index.js

@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect, useLayoutEffect } from "react";
 import exenv from "exenv";
 
 const isClientSide = exenv.canUseDOM;
+const EMPTY_CONTENT = { __html: "" };
 
 const eventListenerOptions = {
     once: true,
@@ -180,7 +181,7 @@ const withHydrationOnDemandClientSide =
                 return (
                     <WrapperComponent
                         ref={rootRef}
-                        dangerouslySetInnerHTML={{ __html: "" }}
+                        dangerouslySetInnerHTML={EMPTY_CONTENT}
                         suppressHydrationWarning
                         {...wrapperPropsRest}
                     />