reset useImperativeHandle ref to null when the component get unmounted (

#3487)

Co-authored-by: Jovi De Croock <decroockjovi@gmail.com>

hooks/src/index.js

@@ -197,8 +197,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);
+	});
 });