How to check dirty flag without forcing rerenders?

[dharkness]

I have registered a function with React Router that will ask the user if they want to discard changes or block the route switch. Everything works, but the only way I can see to check the dirty state of the form is to use

const { dirtyFields } = formState;

which causes the form to be rendered on every input change. If I don't do that, checking formState.dirty returns false since it's bound to the initial formState object. Is there a way to access the dirty flag on-the-fly via an object or reference that doesn't change and doesn't cause rerenders? Perhaps formState.isDirty() or something similar?

As an example, I store my function above in a reference held in a React Context. This way each route can supply a different function without rerendering the entire application since the reference itself never changes—only the value it holds.

[bluebill1049]

at the stage, we don't want to expand the API, perhaps you should form at each route.

[dharkness]

I understand not wanting to add to the API, but I'm surprised this isn't needed by a lot more people. We also need to check the dirty state when the user clicks the Cancel button and show a yes/no confirmation dialog if they've made changes. This also forces us to rerender the form. Is that really the case?

[bluebill1049]

here is an example: reset(getValues(), { dirty: true })
https://react-hook-form.com/api#reset

[dharkness]

The reset() function won't work for me as it doesn't tell me if the form is dirty, but thanks for the pointer.

I understand that you want a small API and how that benefits developers. You'll get no argument from me there. I'm just surprised that wasn't one of the first API methods added and that no one else has asked for it. Perhaps it's because most people don't build native-like applications with confirmation dialogs warning users when they take actions that will discard data. Just let them lose it, and they'll eventually learn not to do that. ;)

As I said, rerendering the entire form on every character typed solves the issue. It's suboptimal and runs counter to one of the selling points of this library, but it gets the job done.

Thanks again for your assistance.

[bluebill1049]

The reset() function won't work for me as it doesn't tell me if the form is dirty, but thanks for the pointer.

i guess you can check the current dirty state before reset it right?

[dharkness]

That's exactly what I'm trying to do, but how do I "check the current dirty state" on-the-fly without forcing rerenders on every onChange event?

[bluebill1049]

dirty doesn't trigger on each keystroke right? it only turn to true or false probably a single re-render.

[mfearby]

I'm wondering about this, too. I want to show an "Undo" button but only have it appear when the form is dirty. I've just started using react-hook-form because it looks great, but this seems to be an annoying little omission.

My bad. Just found it: I can use "formState.isDirty".

[bluebill1049]

All good 🙏

[PascalLuginbuehl]

I suppose useFormState is the solution to not trigger rerenders

const { isDirty } = useFormState({ control: form.control });

[chunkydotdev]

Thank you! Have been looking for this for three days! 😂

[vinchi777]

This still does trigger a rerender though.

[bluebill1049]

If you don't want to impact any of your UI, you could move it into a component without a view.

function Listner() {
  const { isDirty } = useFormState()

  if (isDirty) {
    // do x
  } else {
    // do y
  }

  return null;
}