Add useCallback to optimize handleCheckForm

Refactored handleCheckForm using useCallback to prevent unnecessary re-renders. This ensures the function is only re-created when formData.backendFormName changes, improving performance. Updated useEffect dependencies to include handleCheckForm for proper effect cleanup.
This commit is contained in:
Teriuihi 2024-08-10 03:27:28 +02:00
parent 6215944972
commit afb833bd19

View File

@ -1,11 +1,12 @@
import {FormData} from "./formInterfaces"; import {FormData} from "./formInterfaces";
import {useEffect, useState} from "react"; import {useEffect, useState, useCallback} from "react";
import GenericForm from "./genericForm"; import GenericForm from "./genericForm";
const FormActiveRedirect = (formData: FormData) => { const FormActiveRedirect = (formData: FormData) => {
const [isLoading, setLoading] = useState(true); const [isLoading, setLoading] = useState(true);
const [isFormActive, setFormActive] = useState(false); const [isFormActive, setFormActive] = useState(false);
const handleCheckForm = async () => {
const handleCheckForm = useCallback(async () => {
const result = await fetch(`${process.env.REACT_APP_BACKEND_BASE_URL}/api/checks/formActive`, { const result = await fetch(`${process.env.REACT_APP_BACKEND_BASE_URL}/api/checks/formActive`, {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
@ -14,11 +15,11 @@ const FormActiveRedirect = (formData: FormData) => {
const response = await result.json(); const response = await result.json();
setFormActive(response.isActive); setFormActive(response.isActive);
setLoading(false); setLoading(false);
}; }, [formData.backendFormName]);
useEffect(() => { useEffect(() => {
handleCheckForm().then(r => {}); handleCheckForm().then(() => {});
}, []); }, [handleCheckForm]);
if (isLoading) { if (isLoading) {
return <div className={"container"}><h2>Checking if form is active</h2></div>; return <div className={"container"}><h2>Checking if form is active</h2></div>;
@ -32,4 +33,5 @@ const FormActiveRedirect = (formData: FormData) => {
<GenericForm {...formData} /> <GenericForm {...formData} />
); );
} }
export default FormActiveRedirect; export default FormActiveRedirect;