fix: nested render error in hydrating (#2039)

* fix: nested render error in hydrating

* v2.1.4

* fix: lint

* fix: test case title

* fix: throw error only in hydrate change

* fix: spelling

* v1.1.0

* fix: spelling

* v2.2.0

packages/driver-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "driver-dom",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "DOM driver for Rax",
   "license": "BSD-3-Clause",
   "main": "lib/index.js",

packages/driver-dom/src/__tests__/hydrate.js

@@ -1,4 +1,4 @@
-import { createElement, render } from 'rax';
+import { createElement, render, useEffect } from 'rax';
 
 describe('Hydrate', () => {
   let DriverDOM;
@@ -33,6 +33,65 @@ describe('Hydrate', () => {
     expect(container.childNodes[0].childNodes[2].data).toBe('Rax');
   });
 
+  it('should not be affected by render in useEffect', () => {
+    const childContainer = document.createElement('div');
+    (document.body || document.documentElement).appendChild(childContainer);
+
+    const Child = () => {
+      useEffect(() => {
+        render(<span>child content</span>, childContainer);
+      });
+
+      return null;
+    };
+
+    const Component = () => {
+      return (
+        <div class="container">
+          <div>About Rax</div>
+          <Child />
+        </div>
+      );
+    };
+
+    jest.useFakeTimers();
+
+    render(<Component />, container, { driver: DriverDOM, hydrate: true });
+
+    jest.runAllTimers();
+
+    expect(container.childNodes[0].childNodes[1].nodeType).toBe(8); // comment;
+  });
+
+  it('should throw error for nested render when hydrating', () => {
+    const childContainer = document.createElement('div');
+    (document.body || document.documentElement).appendChild(childContainer);
+
+    const Child = () => {
+      render(<span>child content</span>, childContainer);
+      return null;
+    };
+
+    const Component = () => {
+      return (
+        <div class="container">
+          <div>About Rax</div>
+          <Child />
+        </div>
+      );
+    };
+
+    expect(() => {
+      jest.useFakeTimers();
+
+      render(<Component />, container, { driver: DriverDOM, hydrate: true });
+
+      jest.runAllTimers();
+    }).toThrowError('Nested render is not allowed when hydrating. If necessary, trigger render in useEffect.', {
+      withoutStack: true,
+    });
+  });
+
   it('should warn for replaced hydratable element', () => {
     const Component = () => {
       return (

packages/driver-dom/src/index.js

@@ -431,6 +431,18 @@ export function setStyle(node, style, __shouldConvertUnitlessToRpx, __shouldConv
 }
 
 export function beforeRender({ hydrate }) {
+  // Nested render may reset `isHydrating`, `recolectHydrationChild` will not work correctly after render.
+  if (isHydrating && !hydrate) {
+    if (__DEV__) {
+      throw new Error(
+        'Nested render is not allowed when hydrating. ' +
+        'If necessary, trigger render in useEffect.'
+      );
+    } else {
+      throw new Error('Nested render found.');
+    }
+  }
+
   isHydrating = hydrate;
 }
 

packages/rax-create-portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-create-portal",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Rax createPortal",
   "license": "BSD-3-Clause",
   "main": "lib/index.js",
@@ -24,6 +24,7 @@
   "devDependencies": {
     "rax": "^1.0.0",
     "driver-server": "^1.0.0",
+    "driver-dom": "^2.1.3",
     "rax-proptypes": "^1.0.0"
   }
 }

packages/rax-create-portal/src/__tests__/createPortal.js

@@ -3,6 +3,7 @@
 import PropTypes from 'rax-proptypes';
 import { Component, createElement, render, shared, createContext, useContext, useState } from 'rax';
 import ServerDriver from 'driver-server';
+import * as DriverDOM from 'driver-dom';
 import unmountComponentAtNode from 'rax-unmount-component-at-node';
 import createPortal from '../';
 
@@ -237,4 +238,31 @@ describe('createPortal', () => {
     jest.runAllTimers();
     expect(portalTarget.childNodes[0].childNodes[0].data).toBe('2');
   });
+
+  it('should not affect the result of hydrate', () => {
+    const container = document.createElement('div');
+    container.innerHTML = '<div class="container"><div>About Rax</div><div>Docs</div></div>';
+    (document.body || document.documentElement).appendChild(container);
+
+    const portalContainer = document.createElement('div');
+    (document.body || document.documentElement).appendChild(portalContainer);
+
+    const App = () => {
+      return (
+        <div class="container">
+          <div>About Rax</div>
+          {createPortal(<div>portal</div>, portalContainer)}
+        </div>
+      );
+    };
+
+    jest.useFakeTimers();
+
+    render(<App />, container, { driver: DriverDOM, hydrate: true });
+
+    jest.runAllTimers();
+
+    expect(container.childNodes[0].childNodes[1].nodeType).toBe(8); // comment;
+    expect(portalContainer.childNodes[0].childNodes[0].data).toBe('portal');
+  });
 });

packages/rax-create-portal/src/index.js

@@ -1,36 +1,21 @@
-import { Component, render, createElement } from 'rax';
+import { render, createElement, useEffect } from 'rax';
 import unmountComponentAtNode from 'rax-unmount-component-at-node';
 
-class Portal extends Component {
-  constructor(props, context) {
-    super(props, context);
-  }
-
-  componentDidMount() {
-    this.renderPortal();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.container !== this.props.container) {
-      unmountComponentAtNode(prevProps.container);
-    }
-
-    this.renderPortal();
-  }
-
-  componentWillUnmount() {
-    unmountComponentAtNode(this.props.container);
-  }
-
-  renderPortal() {
-    render(this.props.element, this.props.container, {
+function Portal(props) {
+  useEffect(() => {
+    // Nested render will cause error when hydrating, it should be trigger in useEffect.
+    render(props.element, props.container, {
       parent: this
     });
-  }
+  });
+
+  useEffect(() => {
+    return () => {
+      unmountComponentAtNode(props.container);
+    };
+  }, [props.container]);
 
-  render() {
-    return null;
-  }
+  return null;
 }
 
 export default function createPortal(element, container) {