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:
parent
6215944972
commit
afb833bd19
|
|
@ -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;
|
||||||
Loading…
Reference in New Issue
Block a user