May the Forms be with You: A Jedi's Guide to onBlur, onChange and onTouched

React Hook Form (RHF) knows the modes: onChange, onBlur and onTouched. If you are familiar with RHF but don’t know what they do, you could use some help of a Jedi master!

onChange

Let's start with onChange. Like a Jedi using the Force to feel the will of the user, onChange is triggered whenever there is a change in the value of an input field. Whether the change comes from the user typing or from a programmatic change of the value, onChange is there to help you update the value of the input field as the user types.

But beware, young Padawan, for there is a dark side to onChange. If you're not careful, it can be dangerous and negatively impact the performance of your app. Imagine you have a text field where users can enter their name. If you use onChange to update the value with every keystroke, it can lead to unnecessary re-rendering and delays in your app. So use onChange with care and wisdom.

onBlur

Now let's move on to onBlur. Like a Jedi focusing on feeling the energy of their surroundings, onBlur is triggered when an input field loses focus. For example, if the user moves to another field, onBlur is triggered to help you validate the entered value.

But be careful, young Jedi, as there are certain circumstances where onBlur is not triggered. For example, if the user clicks the browser's back button or refreshes the page, onBlur is not triggered. So if you're using onBlur to validate data, make sure to use other methods to ensure your data is safe.

onTouched

Last but not least, onTouched. Like a Jedi using their powers to sense the thoughts of others, onTouched is triggered when a user touches or interacts with an input field. This is useful if you want to let the user know which fields they have already touched and where they still need to work.

But beware, as onTouched can sometimes be misleading, just like the dark side of the Force. It doesn't necessarily mean that data has actually been entered into the input field. Sometimes a user can touch a field and then decide not to enter data into it. So use onTouched in conjunction with other validation methods to ensure your data is accurate and complete.