fix: solid fields should not render every field on keystroke anymore (#1959)

* fix: solid fields should not render every field on keystroke anymore

Co-authored-by: Kevin Van Cott <[email protected]>

* ci: apply automated fixes and generate docs

* chore: fix lint

---------

Co-authored-by: Kevin Van Cott <[email protected]>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

.changeset/puny-wombats-tap.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/solid-form': patch
+'@tanstack/form-core': patch
+---
+
+Fix double-rendering of Solid fields

packages/form-core/src/FieldApi.ts

@@ -1169,7 +1169,33 @@ export class FieldApi<
 
     this.store = new Derived({
       deps: [this.form.store],
-      fn: () => {
+      fn: ({ prevVal: _prevVal }) => {
+        const prevVal = _prevVal as
+          | FieldState<
+              TParentData,
+              TName,
+              TData,
+              TOnMount,
+              TOnChange,
+              TOnChangeAsync,
+              TOnBlur,
+              TOnBlurAsync,
+              TOnSubmit,
+              TOnSubmitAsync,
+              TOnDynamic,
+              TOnDynamicAsync,
+              TFormOnMount,
+              TFormOnChange,
+              TFormOnChangeAsync,
+              TFormOnBlur,
+              TFormOnBlurAsync,
+              TFormOnSubmit,
+              TFormOnSubmitAsync,
+              TFormOnDynamic,
+              TFormOnDynamicAsync
+            >
+          | undefined
+
         const meta = this.form.getFieldMeta(this.name) ?? {
           ...defaultFieldMeta,
           ...opts.defaultMeta,
@@ -1185,6 +1211,10 @@ export class FieldApi<
           value = this.options.defaultValue
         }
 
+        if (prevVal && prevVal.value === value && prevVal.meta === meta) {
+          return prevVal
+        }
+
         return {
           value,
           meta,

packages/solid-form/src/createField.tsx

@@ -6,6 +6,7 @@ import {
   onCleanup,
   onMount,
 } from 'solid-js'
+import { useStore } from '@tanstack/solid-store'
 import type {
   DeepKeys,
   DeepValue,
@@ -251,8 +252,14 @@ function makeFieldReactive<
     TParentSubmitMeta
   > {
   const [field, setField] = createSignal(fieldApi, { equals: false })
-  const unsubscribeStore = fieldApi.store.subscribe(() => setField(fieldApi))
-  onCleanup(unsubscribeStore)
+  // Handle shallow comparison to make sure that Derived doesn't create a new setField call every time
+  const store = useStore(fieldApi.store, (store) => store)
+  // Run before initial render
+  createComputed(() => {
+    // Use the store to track dependencies
+    store()
+    setField(fieldApi)
+  })
   return field
 }