diff --git a/src/formState.test.tsx b/src/formState.test.tsx index 3ec8e22..83d1fd5 100644 --- a/src/formState.test.tsx +++ b/src/formState.test.tsx @@ -1129,6 +1129,30 @@ describe("formState", () => { expect(r.baseElement).toHaveTextContent("bob"); }); + it("memoizes on init.input being an array", async () => { + // Given a component + type FormValue = Pick; + const config: ObjectConfig = { firstName: { type: "value" } }; + function TestComponent() { + const [, setTick] = useState(0); + const form = useFormState({ + config, + init: { input: ["a", "b"], map: ([a, b]) => ({ firstName: a + b }) }, + }); + const onClick = () => [form.firstName.set("fred"), setTick(1)]; + return ( +
+
+ ); + } + const r = await render(); + expect(r.firstName()).toHaveTextContent("ab"); + click(r.change); + expect(r.firstName()).toHaveTextContent("fred"); + }); + it("uses default if init.input is undefined", async () => { // Given a component function TestComponent() { diff --git a/src/formState.ts b/src/formState.ts index 358c300..31ebe1b 100644 --- a/src/formState.ts +++ b/src/formState.ts @@ -85,7 +85,7 @@ export function useFormState(opts: UseFormStateOpts): ObjectState }, [ config, // If they're using init.input, useMemo on it, otherwise let the identity of init be unstable - ...(init && "input" in init && "map" in init ? [init.input] : []), + ...(init && "input" in init && "map" in init ? (Array.isArray(init.input) ? init.input : [init.input]) : []), ]); // Use useEffect so that we don't touch the form.init proxy during a render