Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(core, react-form): Avoid set state error in React by avoiding set… #1250

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(core, react-form): Avoid set state error in React by avoiding set… #1250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5c4450e
fix(form-core): move setting default value to mount function to avoid…
juanvilladev Mar 12, 2025
f4f1055
ci: apply automated fixes and generate docs
autofix-ci[bot] Mar 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions docs/reference/classes/fieldapi.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ The current field state.
getInfo(): FieldInfo<TParentData>
```

Defined in: [packages/form-core/src/FieldApi.ts:1221](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1221)
Defined in: [packages/form-core/src/FieldApi.ts:1222](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1222)

Gets the field information object.

Expand All @@ -179,7 +179,7 @@ Gets the field information object.
getMeta(): FieldMeta<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync>
```

Defined in: [packages/form-core/src/FieldApi.ts:1189](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1189)
Defined in: [packages/form-core/src/FieldApi.ts:1190](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1190)

#### Returns

Expand All @@ -193,7 +193,7 @@ Defined in: [packages/form-core/src/FieldApi.ts:1189](https://github.com/TanStac
getValue(): TData
```

Defined in: [packages/form-core/src/FieldApi.ts:1171](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1171)
Defined in: [packages/form-core/src/FieldApi.ts:1172](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1172)

Gets the current field value.

Expand Down Expand Up @@ -254,7 +254,7 @@ insertValue(
opts?): void
```

Defined in: [packages/form-core/src/FieldApi.ts:1241](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1241)
Defined in: [packages/form-core/src/FieldApi.ts:1242](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1242)

Inserts a value at the specified index, shifting the subsequent values to the right.

Expand Down Expand Up @@ -284,7 +284,7 @@ Inserts a value at the specified index, shifting the subsequent values to the ri
mount(): () => void
```

Defined in: [packages/form-core/src/FieldApi.ts:1077](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1077)
Defined in: [packages/form-core/src/FieldApi.ts:1072](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1072)

Mounts the field instance to the form.

Expand All @@ -307,7 +307,7 @@ moveValue(
opts?): void
```

Defined in: [packages/form-core/src/FieldApi.ts:1297](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1297)
Defined in: [packages/form-core/src/FieldApi.ts:1298](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1298)

Moves the value at the first specified index to the second specified index.

Expand Down Expand Up @@ -337,7 +337,7 @@ Moves the value at the first specified index to the second specified index.
pushValue(value, opts?): void
```

Defined in: [packages/form-core/src/FieldApi.ts:1226](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1226)
Defined in: [packages/form-core/src/FieldApi.ts:1227](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1227)

Pushes a new value to the field.

Expand All @@ -363,7 +363,7 @@ Pushes a new value to the field.
removeValue(index, opts?): void
```

Defined in: [packages/form-core/src/FieldApi.ts:1273](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1273)
Defined in: [packages/form-core/src/FieldApi.ts:1274](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1274)

Removes a value at the specified index.

Expand Down Expand Up @@ -392,7 +392,7 @@ replaceValue(
opts?): void
```

Defined in: [packages/form-core/src/FieldApi.ts:1257](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1257)
Defined in: [packages/form-core/src/FieldApi.ts:1258](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1258)

Replaces a value at the specified index.

Expand Down Expand Up @@ -444,7 +444,7 @@ Updates the field's errorMap
setMeta(updater): void
```

Defined in: [packages/form-core/src/FieldApi.ts:1194](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1194)
Defined in: [packages/form-core/src/FieldApi.ts:1195](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1195)

Sets the field metadata.

Expand All @@ -466,7 +466,7 @@ Sets the field metadata.
setValue(updater, options?): void
```

Defined in: [packages/form-core/src/FieldApi.ts:1178](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1178)
Defined in: [packages/form-core/src/FieldApi.ts:1179](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1179)

Sets the field value and run the `change` validator.

Expand Down Expand Up @@ -495,7 +495,7 @@ swapValues(
opts?): void
```

Defined in: [packages/form-core/src/FieldApi.ts:1285](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1285)
Defined in: [packages/form-core/src/FieldApi.ts:1286](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1286)

Swaps the values at the specified indices.

Expand Down Expand Up @@ -525,7 +525,7 @@ Swaps the values at the specified indices.
update(opts): void
```

Defined in: [packages/form-core/src/FieldApi.ts:1119](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1119)
Defined in: [packages/form-core/src/FieldApi.ts:1120](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1120)

Updates the field instance with new options.

Expand Down
12 changes: 6 additions & 6 deletions packages/form-core/src/FieldApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -996,11 +996,6 @@ export class FieldApi<
this.form = opts.form as never
this.name = opts.name as never
this.timeoutIds = {} as Record<ValidationCause, never>
if (opts.defaultValue !== undefined) {
this.form.setFieldValue(this.name, opts.defaultValue as never, {
dontUpdateMeta: true,
})
}

this.store = new Derived({
deps: [this.form.store],
Expand Down Expand Up @@ -1077,6 +1072,12 @@ export class FieldApi<
mount = () => {
const cleanup = this.store.mount()

if (this.options.defaultValue !== undefined) {
this.form.setFieldValue(this.name, this.options.defaultValue as never, {
dontUpdateMeta: true,
})
}

const info = this.getInfo()
info.instance = this as never

Expand Down Expand Up @@ -1558,7 +1559,6 @@ export class FieldApi<

// TODO: Dedupe this logic to reduce bundle size
for (const validateObj of validates) {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line is not needed, ESLint removes on save

if (!validateObj.validate) continue
validateFieldAsyncFn(this, validateObj, validatesPromises)
}
Expand Down
47 changes: 47 additions & 0 deletions packages/react-form/tests/useField.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1130,4 +1130,51 @@ describe('useField', () => {
// field2 should not have rerendered
expect(renderCount.field2).toBe(field2InitialRender)
})

it('should handle defaultValue without setstate-in-render error', async () => {
// Spy on console.error before rendering
const consoleErrorSpy = vi.spyOn(console, 'error')

function Comp() {
const form = useForm({
defaultValues: {
fieldOne: '',
fieldTwo: '',
},
})

const fieldOne = useStore(form.store, (state) => state.values.fieldOne)

return (
<form>
<form.Field
name="fieldOne"
children={(field) => {
return (
<input
data-testid={field.name}
id={field.name}
value={field.state.value}
onChange={(e) => field.handleChange(e.target.value)}
/>
)
}}
/>
{fieldOne && (
<form.Field
name="fieldTwo"
defaultValue="default field two value"
children={(_) => null}
/>
)}
</form>
)
}

const { getByTestId } = render(<Comp />)
await user.type(getByTestId('fieldOne'), 'John')

// Should not log an error
expect(consoleErrorSpy).not.toHaveBeenCalled()
})
})