Merge pull request #2804 from preactjs/render-from-effect

allow rendering from an effect

hooks/src/index.js

@@ -331,15 +331,23 @@ function afterPaint(newQueueLength) {
  * @param {import('./internal').EffectHookState} hook
  */
 function invokeCleanup(hook) {
+	// A hook cleanup can introduce a call to render which creates a new root, this will call options.vnode
+	// and move the currentComponent away.
+	const comp = currentComponent;
 	if (typeof hook._cleanup == 'function') hook._cleanup();
+	currentComponent = comp;
 }
 
 /**
  * Invoke a Hook's effect
  * @param {import('./internal').EffectHookState} hook
  */
 function invokeEffect(hook) {
+	// A hook call can introduce a call to render which creates a new root, this will call options.vnode
+	// and move the currentComponent away.
+	const comp = currentComponent;
 	hook._cleanup = hook._value();
+	currentComponent = comp;
 }
 
 /**

hooks/test/browser/useEffect.test.js

@@ -1,7 +1,7 @@
 import { act } from 'preact/test-utils';
 import { createElement, render, Fragment, Component } from 'preact';
+import { useEffect, useState, useRef } from 'preact/hooks';
 import { setupScratch, teardown } from '../../../test/_util/helpers';
-import { useEffect, useState } from 'preact/hooks';
 import { useEffectAssertions } from './useEffectAssertions.test';
 import { scheduleEffectAssert } from '../_util/useEffectUtil';
 
@@ -320,4 +320,54 @@ describe('useEffect', () => {
 
 		render(<div>Replacement</div>, scratch);
 	});
+
+	it('support render roots from an effect', async () => {
+		let promise, increment;
+
+		const Counter = () => {
+			const [count, setCount] = useState(0);
+			const renderRoot = useRef();
+			useEffect(() => {
+				if (count > 0) {
+					const div = renderRoot.current;
+					return () => render(<Dummy />, div);
+				}
+				return () => 'test';
+			}, [count]);
+
+			increment = () => {
+				setCount(x => x + 1);
+				promise = new Promise(res => {
+					setTimeout(() => {
+						setCount(x => x + 1);
+						res();
+					});
+				});
+			};
+
+			return (
+				<div>
+					<div>Count: {count}</div>
+					<div ref={renderRoot} />
+				</div>
+			);
+		};
+
+		const Dummy = () => <div>dummy</div>;
+
+		render(<Counter />, scratch);
+
+		expect(scratch.innerHTML).to.equal(
+			'<div><div>Count: 0</div><div></div></div>'
+		);
+
+		act(() => {
+			increment();
+		});
+		await promise;
+		act(() => {});
+		expect(scratch.innerHTML).to.equal(
+			'<div><div>Count: 2</div><div><div>dummy</div></div></div>'
+		);
+	});
 });