Component called twice

[ryan-mahoney]

Working locally, I am seeing that each of my Field components are getting called twice, the first time with no value and the second time with the value. This is causing significant defects in my application, which caused me to downgrade, and the issue was resolved.

Apologies, I don't have a test case, but due to the severity of this issue, I wanted to notify you right away.

[gidomanders]

We are experiencing the same issue. Throughout our application, the value initially starts as undefined, then it becomes an empty string, and finally, you obtain the actual value.

It looks like the initialValues are being lazy loaded, which is why we get the undefined at first. I can work with that; the form values are all Partials anyway. But when the value is an empty string, it doesn't comply with the form data types we expect, and we get all sorts of errors. Especially when the value is supposed to be an array, you get errors when using functions like filter.

The OnChange from final-form-listeners also triggers actions when the value is changed, so when the value is changed from undefined to an empty string to the actual value, we get unexpected behaviour. If there was no actual change, why is OnChange triggered 3 times?

I hope this issue will be fixed soon as I could definitely use the React 19 compatibility.

[MrAndrushik]

We encountered the same problem when updating. Minimum option for comparing the work of different versions

import React from 'react';
import { Form, Field, type FieldRenderProps } from 'react-final-form';

interface FormValues {
    name: string;
}

const initialValues: FormValues = {
    name: 'Name',
};

export const QueueForm: React.FC = () => {
    const handleSubmit = (values: FormValues) => {
        console.log('Submitted values:', values);
    };

    return (
        <Form<FormValues>
            initialValues={initialValues}
            keepDirtyOnReinitialize
            onSubmit={handleSubmit}
        >
            {() => (
                <Field name="name">
                    {({ input: inputProps }: FieldRenderProps<string, HTMLInputElement>) => {

                        console.log('value', inputProps.value);
                        console.log('typeof value', typeof inputProps.value);

                        return (
                            <>
                                <input
                                    id="name"
                                    placeholder="Placeholder"
                                    {...inputProps}
                                />
                            </>
                        );
                    }}
                </Field>
            )}
        </Form>
    );
};

Packages

"react": "^18.2.0",
"react-dom": "^18.2.0",

For empty first render

"final-form": "^5.0.0",
"react-final-form": "^7.0.0"

For first render with value:

"final-form": "^4.20.4",
"react-final-form": "^6.5.9"

[erikras-gilfoyle-agent]

Status Update

This issue was likely fixed by PR #1060 (merged Feb 4, 2026), which addresses the root cause: useField now checks form.getState().initialValues during initial render before falling back to field-level initialValue.

What changed:

• Before: useField would return undefined on first render if the field wasn't registered yet
• After: useField checks Form initialValues during useState initialization, so fields get their correct initial value on first render

Can you verify?

@gidomanders @MrAndrushik — Can you test with the latest react-final-form@main branch or wait for the next release? The fix should eliminate the undefined → "" → actual value sequence you described.

If this is fixed, we can close this issue as a duplicate of #1050.

---

Related:

• Issue [Bug v7.0.0] useField returns undefined value on initial render despite initialValues being set #1050 (closed): useField returns undefined value on initial render
• PR Fix #1050: useField returns Form initialValues on first render #1060 (merged): Fix #1050: useField returns Form initialValues on first render