formState.isDirty not reflecting changes after reset until second submit

[xtnctx]

I'm using react-hook-form 7.49.2 and ran into an issue where formState.isDirty doesn't seem to reflect the user's changes immediately after a reset() call — at least not on the first try.

What I'm doing:

• I'm using reset({ ...data }) to populate the form from an external source (e.g., editing an item).
• After that, the user modifies one of the fields.
• Then I call formState.isDirty during form submission to check if the form was changed.

But formState.isDirty is always false on the first submission, even if a field was changed. If I try again (with or without changes), isDirty starts working correctly.

What worked instead

const isFormDirty = Object.keys(formState.dirtyFields).length > 0

That reliably detects field changes, even after reset().

Am I doing something wrong?

Is this expected behavior for isDirty? Or should it reflect changes right after a user modifies the form post-reset?

I assumed isDirty should become true as soon as any field changes from its reset/default value, but maybe there's something I'm missing about how it's tracked internally.

I hope someone can clarify this for me. Thanks!

Code

import { Controller, useForm } from 'react-hook-form';
...


const TypeSpecificSettings: React.FC = () => {
    const { t } = useTranslation('common');

    const { control, formState, handleSubmit, watch, reset } = useForm<IUpdateGameTypeLimitParams>({
        defaultValues: {
            gameType: undefined,
            min: undefined,
            max: undefined,
            win: undefined,
            used: undefined,
        },
    });

    const [openEditDialog, setOpenEditDialog] = useState<boolean>(false);
    const [reload, setReload] = useState<boolean>(false);

    const { gameTypeLimits, getAgenGameTypeLimit, handleGetLimit } = useGameTypeLimit();
    const { updateGameTypeLimit } = useEditGameTypeLimit();

    function handleEditDialogClose(_: unknown, reason: string) {
        if (reason === 'backdropClick' || reason === 'escapeKeyDown') {
            setOpenEditDialog(false);
        }
    }

    useEffect(() => {
        getAgenGameTypeLimit({});
    }, [reload]);

    useEffect(() => {
        handleGetLimit();
    }, []);

    return (
        <Content>
            <OSPageTitle
                title={t('type_specific_settings')}
            />

            <Card>
                <TableContainer>
                    <Table>
                        <TableHead sx={{ '& .MuiTableCell-root': { textAlign: 'center' } }}>
                            <TableRow>
                                ...
                                ...
                                ...
                            </TableRow>
                        </TableHead>
                        <TableBody sx={{ '& .MuiTableCell-root': { textAlign: 'center' } }}>
                            {gameTypeLimits.map((game, index) => {
                                return (
                                    <TableRow key={index}>
                                       ...
                                       ...
                                        <TableCell>
                                            <Box>
                                                <Button
                                                    variant='outlined'
                                                    size='small'
                                                    onClick={() => {
                                                        reset(
                                                            {
                                                                gameType: game.gametype,
                                                                min: game.min,
                                                                max: game.max,
                                                                win: game.win,
                                                                used: game.used,
                                                            }
                                                        )
                                                        setOpenEditDialog(true);
                                                    }}
                                                >
                                                    {t('edit')}
                                                </Button>
                                            </Box>
                                        </TableCell>
                                    </TableRow>
                                );
                            })}
                        </TableBody>
                    </Table>
                </TableContainer>
                <Stack
                    direction='column'
                    justifyContent='space-between'
                    alignItems='center'
                >
                    <Stack
                        alignItems='center'
                        gap={1}
                        style={{ width: '100%', display: 'flex', justifyContent: 'space-evenly' }}
                    ></Stack>
                </Stack>
            </Card>

            <Dialog
                open={openEditDialog}
                onClose={handleEditDialogClose}
                fullWidth
            >
                <DialogTitle>{t('type_specific_settings')}</DialogTitle>
                <DialogContent>
                    <Stack
                        gap={2}
                        mx={1}
                    >
                        <Box>
                            <Typography
                                variant='body2'
                                color='text.secondary'
                            >
                                {t('game_type')}
                            </Typography>
                            <Typography>{watch('gameType')}</Typography>
                        </Box>

                        <Controller
                            name='min'
                            control={control}
                            render={({ field }) =>
                                <OSNumberField
                                    label='min_bet'
                                    value={field.value}
                                    onChange={field.onChange}
                                />
                            }
                        />

                        <Controller
                            name='max'
                            control={control}
                            render={({ field }) =>
                                <OSNumberField
                                    label='max_bet'
                                    value={field.value}
                                    onChange={field.onChange}
                                />
                            }
                        />

                        <Controller
                            name='win'
                            control={control}
                            render={({ field }) =>
                                <OSNumberField
                                    label='max_win'
                                    value={field.value}
                                    onChange={field.onChange}
                                />
                            }
                        />

                        <Box >
                            <Controller
                                name='used'
                                control={control}
                                render={({ field }) =>
                                    <FormControlLabel
                                        control={
                                            <Switch
                                                checked={!!field.value}
                                                onChange={e => field.onChange(e.target.checked)}
                                            />
                                        }
                                        label={<Typography color='text.secondary'>{t('used')}</Typography>}
                                        labelPlacement='start'
                                        sx={{ gap: 1.5, mx: 0.5 }}
                                    />
                                }
                            />
                        </Box>

                        <Typography
                            mt={1}
                            color='text.secondary'
                        >
                            {t('max_win_info')}
                        </Typography>

                        <Stack
                            direction={'row'}
                            mt={1}
                            gap={1}
                        >
                            <OSLoadingButton
                                label='save'
                                fullWidth
                                loading={formState.isSubmitting}
                                onClick={handleSubmit(async (data) => {
                                   // const isFormDirty = Object.keys(formState.dirtyFields).length > 0 <---- Normally works
                                    if (!formState.isDirty) {  // <---- Not working on the first try
                                        setOpenEditDialog(false)
                                        return
                                    }

                                    // fetch data
                                    // ...
                                    // ...
                                    setOpenEditDialog(false)
                                })}
                            />
                        </Stack>
                    </Stack>
                </DialogContent>

                <DialogActions>
                    <Button onClick={() => setOpenEditDialog(false)} >
                        {t('close')}
                    </Button>
                </DialogActions>
            </Dialog>
        </Content>
    );
};

export default TypeSpecificSettings;

[dieptrv]

I'm facing the same issue. Even though the docs suggest to use isDirty to check the formState but const isFormDirty = Object.keys(formState.dirtyFields).length > 0 provides a proper result while formState.isDirty can not reflect the change.
Is there any update on this?