Update array reference in useArrayControl hook

Author: AlexShukel

packages/core/src/hooks/useArrayControl.ts

@@ -41,7 +41,7 @@ export const useArrayControl = <V>({ name }: ArrayControlConfig<V>): ArrayContro
 
 		const [newItems, output] = update(items);
 
-		setItems(newItems);
+		setItems([...newItems]);
 
 		if (updateErrors && Array.isArray(errors)) {
 			setErrors(typeof updateErrors === 'function' ? updateErrors(errors, items) : update(errors)[0]);

packages/core/tests/hooks/useArrayControl.test.tsx

@@ -519,3 +519,21 @@ describe('removeAt', () => {
 		expect(bag.getFieldTouched(createPxth(['arr']))).toStrictEqual([emptyTouched, emptyTouched]);
 	});
 });
+
+describe('reference updates after changing value', () => {
+	it('setItem should update array reference', () => {
+		const [{ result }, bag] = renderArrayControl(createPxth<unknown[]>(['arr']), {
+			initialValues: {
+				arr: [1, 2, 3, 4],
+			},
+		});
+
+		const prevRef = bag.getFieldValue(bag.paths.arr);
+
+		act(() => {
+			result.current.setItem(2, 1);
+		});
+
+		expect(bag.getFieldValue(bag.paths.arr)).not.toBe(prevRef);
+	});
+});