Merge branch 'main' into use-id-hook

compat/src/forwardRef.js

@@ -24,17 +24,10 @@ export const REACT_FORWARD_SYMBOL =
  * @returns {import('./internal').FunctionComponent}
  */
 export function forwardRef(fn) {
-	// We always have ref in props.ref, except for
-	// mobx-react. It will call this function directly
-	// and always pass ref as the second argument.
-	function Forwarded(props, ref) {
+	function Forwarded(props) {
 		let clone = Object.assign({}, props);
 		delete clone.ref;
-		ref = props.ref || ref;
-		return fn(
-			clone,
-			!ref || (typeof ref === 'object' && !('current' in ref)) ? null : ref
-		);
+		return fn(clone, props.ref || null);
 	}
 
 	// mobx-react checks for this being present

compat/test/browser/forwardRef.test.js

@@ -8,7 +8,8 @@ import React, {
 	useState,
 	useRef,
 	useImperativeHandle,
-	createPortal
+	createPortal,
+	Component
 } from 'preact/compat';
 import { setupScratch, teardown } from '../../../test/_util/helpers';
 import { setupRerender, act } from 'preact/test-utils';
@@ -457,4 +458,44 @@ describe('forwardRef', () => {
 		render(App({}, null), scratch);
 		expect(actual).to.equal(null);
 	});
+
+	// Issue #3483
+	it('should allow for multiple refs', () => {
+		let actual;
+		const App = forwardRef((_, ref) => {
+			actual = ref;
+			return <div />;
+		});
+
+		const ref = { a: createRef(), b: createRef() };
+		// eslint-disable-next-line new-cap
+		render(<App ref={ref} />, scratch);
+		expect(actual).to.equal(ref);
+	});
+
+	it('should not leak context into refs', () => {
+		class Provider extends Component {
+			getChildContext() {
+				return { foo: 2 };
+			}
+			render() {
+				return this.props.children;
+			}
+		}
+
+		let actual;
+		const Forwarded = forwardRef((_, ref) => {
+			actual = ref;
+			return <div />;
+		});
+
+		render(
+			<Provider>
+				<Forwarded />
+			</Provider>,
+			scratch
+		);
+
+		expect(actual).to.equal(null);
+	});
 });

hooks/src/index.js

@@ -245,8 +245,13 @@ export function useImperativeHandle(ref, createHandle, args) {
 	currentHook = 6;
 	useLayoutEffect(
 		() => {
-			if (typeof ref == 'function') ref(createHandle());
-			else if (ref) ref.current = createHandle();
+			if (typeof ref == 'function') {
+				ref(createHandle());
+				return () => ref(null);
+			} else if (ref) {
+				ref.current = createHandle();
+				return () => (ref.current = null);
+			}
 		},
 		args == null ? args : args.concat(ref)
 	);

hooks/test/browser/useImperativeHandle.test.js

@@ -179,4 +179,23 @@ describe('useImperativeHandle', () => {
 
 		expect(() => render(<Comp />, scratch)).to.not.throw();
 	});
+
+	it('should reset ref to null when the component get unmounted', () => {
+		let ref,
+			createHandleSpy = sinon.spy(() => ({ test: () => 'test' }));
+
+		function Comp() {
+			ref = useRef({});
+			useImperativeHandle(ref, createHandleSpy, [1]);
+			return <p>Test</p>;
+		}
+
+		render(<Comp />, scratch);
+		expect(createHandleSpy).to.have.been.calledOnce;
+		expect(ref.current).to.not.equal(null);
+
+		render(<div />, scratch);
+		expect(createHandleSpy).to.have.been.calledOnce;
+		expect(ref.current).to.equal(null);
+	});
 });

package.json

@@ -216,6 +216,9 @@
 		"jsx-runtime/dist",
 		"jsx-runtime/src",
 		"jsx-runtime/package.json",
+		"server/src",
+		"server/package.json",
+		"server/dist",
 		"test-utils/src",
 		"test-utils/package.json",
 		"test-utils/dist"