Import useEffect from "react":
import { useEffect } from "react";
This line imports the useEffect function from the "react" library, which is a hook used to perform side effects in functional components.
function useFormSubmitInterval(intervalMs: number): void {
}
This function is a custom hook named useFormSubmitInterval, and it takes one argument intervalMs, which is the interval duration in milliseconds. It returns void, indicating that it doesn't return any value.
Inside the useEffect hook:
useEffect(() => {
}, [intervalMs]);
This is where the main logic of the custom hook resides. The useEffect hook is used to perform actions when the component mounts or when the intervalMs value changes.
const formSubmitInterval = setInterval(() => {
const submitButton = document.querySelector('button[type="submit"]');
Here, you create an interval using setInterval that executes a function repeatedly at the specified interval. Inside this function, you attempt to find a submit button in the DOM with the attribute type="submit" using document.querySelector.
if (submitButton) {
(submitButton as HTMLButtonElement).click();
}
If a submit button is found (submitButton is not null or undefined), it simulates a click event on the button. This effectively triggers the form submission as if the user had clicked the submit button manually.
Cleanup the interval on unmount:
return () => {
clearInterval(formSubmitInterval)
}
The return statement defines a cleanup function that will be called when the component unmounts. This function clears the interval using clearInterval to prevent memory leaks.
Dependency array [intervalMs]:
The useEffect hook has a dependency array [intervalMs], which means that the effect will run whenever the intervalMs prop changes. This allows you to update the interval duration dynamically based on changes in the intervalMs prop.
Here is complete custom hook:
import { useEffect } from "react";
function useFormSubmitInterval(intervalMs: number): void {
useEffect(() => {
const formSubmitInterval = setInterval(() => {
const submitButton = document.querySelector('button[type="submit"]');
if (submitButton) {
(submitButton as HTMLButtonElement).click();
}
}, intervalMs);
return () => {
clearInterval(formSubmitInterval);
};
}, [intervalMs]);
}
export default useFormSubmitInterval;
Call the hook where you have form with submit and want to use this custom hook
// = = = = = = = = = = = =
// AUTO SAVE DRAFT
// = = = = = = = = = = = =
const intervalMs = 5 * 60 * 1000
useFormSubmitInterval(intervalMs)
