From ce465a52316a4625082e156bdb378ee6ed1275b7 Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Fri, 22 Aug 2025 03:32:09 -0700 Subject: [PATCH] fix: reactivity on form data now works --- package.json | 1 + pnpm-lock.yaml | 18 ++++++++---------- src/contexts/forms.tsx | 9 ++++++++- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index fc14154..5c97532 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@mantine/core": "^8.2.5", "@mantine/hooks": "^8.2.5", "@tanstack/react-form": "^1.19.2", + "@tanstack/react-store": "^0.7.4", "@tanstack/store": "^0.7.4", "react": "^19.1.1", "react-dom": "^19.1.1" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5820d28..e2ab52f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: '@tanstack/react-form': specifier: ^1.19.2 version: 1.19.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1) + '@tanstack/react-store': + specifier: ^0.7.4 + version: 0.7.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1) '@tanstack/store': specifier: ^0.7.4 version: 0.7.4 @@ -547,15 +550,12 @@ packages: '@tanstack/react-start': optional: true - '@tanstack/react-store@0.7.3': - resolution: {integrity: sha512-3Dnqtbw9P2P0gw8uUM8WP2fFfg8XMDSZCTsywRPZe/XqqYW8PGkXKZTvP0AHkE4mpqP9Y43GpOg9vwO44azu6Q==} + '@tanstack/react-store@0.7.4': + resolution: {integrity: sha512-DyG1e5Qz/c1cNLt/NdFbCA7K1QGuFXQYT6EfUltYMJoQ4LzBOGnOl5IjuxepNcRtmIKkGpmdMzdFZEkevgU9bQ==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - '@tanstack/store@0.7.2': - resolution: {integrity: sha512-RP80Z30BYiPX2Pyo0Nyw4s1SJFH2jyM6f9i3HfX4pA+gm5jsnYryscdq2aIQLnL4TaGuQMO+zXmN9nh1Qck+Pg==} - '@tanstack/store@0.7.4': resolution: {integrity: sha512-F1XqZQici1Aq6WigEfcxJSml92nW+85Om8ElBMokPNg5glCYVOmPkZGIQeieYFxcPiKTfwo0MTOQpUyJtwncrg==} @@ -1713,22 +1713,20 @@ snapshots: '@tanstack/react-form@1.19.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1)': dependencies: '@tanstack/form-core': 1.19.2 - '@tanstack/react-store': 0.7.3(react-dom@19.1.1(react@19.1.1))(react@19.1.1) + '@tanstack/react-store': 0.7.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1) decode-formdata: 0.9.0 devalue: 5.1.1 react: 19.1.1 transitivePeerDependencies: - react-dom - '@tanstack/react-store@0.7.3(react-dom@19.1.1(react@19.1.1))(react@19.1.1)': + '@tanstack/react-store@0.7.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1)': dependencies: - '@tanstack/store': 0.7.2 + '@tanstack/store': 0.7.4 react: 19.1.1 react-dom: 19.1.1(react@19.1.1) use-sync-external-store: 1.5.0(react@19.1.1) - '@tanstack/store@0.7.2': {} - '@tanstack/store@0.7.4': {} '@types/babel__core@7.20.5': diff --git a/src/contexts/forms.tsx b/src/contexts/forms.tsx index 3fb8c19..0bfc269 100644 --- a/src/contexts/forms.tsx +++ b/src/contexts/forms.tsx @@ -3,11 +3,13 @@ import { type PropsWithChildren, useCallback, useContext, + useLayoutEffect, useMemo, useState, } from "react"; -import { type AnyFormApi, useStore } from "@tanstack/react-form"; +import { type AnyFormApi } from "@tanstack/react-form"; import { Derived } from "@tanstack/store"; +import { useStore } from "@tanstack/react-store"; interface FormsContextType { forms: Record; @@ -66,6 +68,11 @@ export function useForms() { }); }, [formsContext]); + // Needed, otherwise reactivity will not occur + useLayoutEffect(() => { + return mergedFormStores.mount(); + }, [mergedFormStores]); + const formsState = useStore(mergedFormStores); function submitAll() { -- 2.51.2