fix: keep hooks index with useEffect (#4016)

* fix: keep hooks index with  useEffect

* opt code

---------

Co-authored-by: tyrael <1o1w1mail@gmail.com>

debug/src/debug.js

@@ -32,6 +32,7 @@ export function initDebug() {
 	let oldBeforeDiff = options._diff;
 	let oldDiffed = options.diffed;
 	let oldVnode = options.vnode;
+	let oldRender = options._render;
 	let oldCatchError = options._catchError;
 	let oldRoot = options._root;
 	let oldHook = options._hook;
@@ -252,6 +253,13 @@ export function initDebug() {
 		if (oldBeforeDiff) oldBeforeDiff(vnode);
 	};
 
+	options._render = vnode => {
+		if (oldRender) {
+			oldRender(vnode);
+		}
+		hooksAllowed = true;
+	};
+
 	options._hook = (comp, index, type) => {
 		if (!comp || !hooksAllowed) {
 			throw new Error('Hook can only be invoked from render methods.');

hooks/src/index.js

@@ -53,6 +53,7 @@ options._render = vnode => {
 			hooks._pendingEffects.forEach(invokeCleanup);
 			hooks._pendingEffects.forEach(invokeEffect);
 			hooks._pendingEffects = [];
+			currentIndex = 0;
 		}
 	}
 	previousComponent = currentComponent;

hooks/test/browser/useEffect.test.js

@@ -1,4 +1,4 @@
-import { act } from 'preact/test-utils';
+import { act, teardown as teardownAct } 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';
@@ -369,6 +369,51 @@ describe('useEffect', () => {
 		);
 	});
 
+	it('hooks should be called in right order', async () => {
+		teardownAct();
+
+		let increment;
+
+		const Counter = () => {
+			const [count, setCount] = useState(0);
+			useState('binggo!!');
+			const renderRoot = useRef();
+			useEffect(() => {
+				const div = renderRoot.current;
+				render(<Dummy />, div);
+			}, [count]);
+
+			increment = () => {
+				setCount(x => x + 1);
+				return Promise.resolve().then(() => setCount(x => x + 1));
+			};
+
+			return (
+				<div>
+					<div>Count: {count}</div>
+					<div ref={renderRoot} />
+				</div>
+			);
+		};
+
+		const Dummy = () => {
+			useState();
+			return <div>dummy</div>;
+		};
+
+		render(<Counter />, scratch);
+
+		expect(scratch.innerHTML).to.equal(
+			'<div><div>Count: 0</div><div></div></div>'
+		);
+		/** Using the act function will affect the timing of the useEffect */
+		await increment();
+
+		expect(scratch.innerHTML).to.equal(
+			'<div><div>Count: 2</div><div><div>dummy</div></div></div>'
+		);
+	});
+
 	it('handles errors correctly', () => {
 		class ErrorBoundary extends Component {
 			constructor(props) {