Formik handleBlur use case - reactjs

Question

What are use cases for handleBlur? Since you can access touched fields through the touched object.
From Formik Docs:
handleBlur: (e: any) => void
onBlur event handler. Useful for when you need to track whether an input has been touched or not. This should be passed to <input onBlur={handleBlur} ... />

Answer 1

handleBlur is how touched is actually updated (or at least one of the ways). If your input isn't passed an onBlur handler connecting to Formik's state, the touched state won't be updated.
Here is a codesandbox illustrating the behavior: https://codesandbox.io/s/magical-gates-4cq5k?file=/src/App.js
If you blur the first input, touched is updated. If you blur the second input, touched is not updated. The third input uses useField, which results in an onBlur field being passed to my input automatically. This is typically how I like to work with Formik (or pretty much any other react form library), since it cuts down on the boilerplate necessary to connect form fields to the state of the form.
import React from "react";
import { Formik, Form, useField } from "formik";
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Formik
initialValues={{ usingUseField: "", withBlur: "", withoutBlur: "" }}
>
{({ handleChange, handleBlur, values, touched }) => {
return (
<Form>
{JSON.stringify(touched)}
<div>
<label>
With Blur
<input
onBlur={handleBlur("withBlur")}
onChange={handleChange("withBlur")}
value={values.withBlur}
/>
</label>
</div>
<div>
<label>
Without Blur
<input
onChange={handleChange("withoutBlur")}
value={values.withoutBlur}
/>
</label>
</div>
<InputUsingUseField name="usingUseField" label="Using useField" />
</Form>
);
}}
</Formik>
</div>
);
}
function InputUsingUseField({ label, name }) {
const [props] = useField(name);
return (
<div>
<label>
{label}
<input {...props} />
</label>
</div>
);
}