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"