Why is isValid false when there are no errors?

[thany]

Just need to know - under what conditions after validation has succeeded and there are no errors, can isValid remain false?

This problem (if it's a problem) occurs only when filling out a form with Cypress, but not manually. This makes me suspect a race condition. But why can I see isValidating going from true and back to false, produce no errors, and keep isValid at false? How? Why?

[harshagarwalnyu]

Yeah, this is a classic race condition often seen in fast automation environments like Cypress. The reason is that isValid is a derived state that updates asynchronously in a microtask after the validation cycle completes: it doesn't always flip to true at the exact same moment your error object clears.

When you see isValidating go from true to false and errors is empty, RHF has finished the validation, but React might not have flushed the state update for isValid to your component yet. Cypress is fast enough to catch that intermediate frame.

First, make sure you are actually destructuring isValid from formState. RHF uses a Proxy to optimize performance, so if you don't destructure it, the hook won't subscribe to those updates and it'll stay false:

// This destructuring is required for subscription
const { formState: { isValid, errors } } = useForm({ 
  mode: 'onChange' 
});

For Cypress specifically, stop checking the isValid variable directly. Instead, rely on Cypress's retry-ability by asserting on the UI state, like the submit button status. Cypress will automatically retry the assertion until the state finishes updating:

// ❌ Avoid checking raw state
// expect(formState.isValid).to.be.true;

// ✅ Assert on the UI
cy.get('input[name="email"]').type('test@example.com');
cy.get('button[type="submit"]').should('not.be.disabled');

If you really need the state, you can wait for the validation to settle by checking isValidating first. But usually, letting Cypress handle the retries on the DOM elements is the most robust path.