diff --git a/.changeset/pretty-coins-itch.md b/.changeset/pretty-coins-itch.md new file mode 100644 index 00000000..1ec931f9 --- /dev/null +++ b/.changeset/pretty-coins-itch.md @@ -0,0 +1,5 @@ +--- +'@reactive-forms/core': patch +--- + +Update array reference in useArrayControl hook diff --git a/packages/core/src/hooks/useArrayControl.ts b/packages/core/src/hooks/useArrayControl.ts index b2c914b4..24a03888 100644 --- a/packages/core/src/hooks/useArrayControl.ts +++ b/packages/core/src/hooks/useArrayControl.ts @@ -41,7 +41,7 @@ export const useArrayControl = ({ name }: ArrayControlConfig): 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]); diff --git a/packages/core/tests/hooks/useArrayControl.test.tsx b/packages/core/tests/hooks/useArrayControl.test.tsx index 4bd884d7..6ca140e6 100644 --- a/packages/core/tests/hooks/useArrayControl.test.tsx +++ b/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(['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); + }); +});