From afb833bd196e59a4246f0d3f686b56e8370ade30 Mon Sep 17 00:00:00 2001 From: Teriuihi Date: Sat, 10 Aug 2024 03:27:28 +0200 Subject: [PATCH] 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. --- src/components/form/formActiveRedirect.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/form/formActiveRedirect.tsx b/src/components/form/formActiveRedirect.tsx index 943526b..50e29d2 100644 --- a/src/components/form/formActiveRedirect.tsx +++ b/src/components/form/formActiveRedirect.tsx @@ -1,11 +1,12 @@ import {FormData} from "./formInterfaces"; -import {useEffect, useState} from "react"; +import {useEffect, useState, useCallback} from "react"; import GenericForm from "./genericForm"; const FormActiveRedirect = (formData: FormData) => { const [isLoading, setLoading] = useState(true); 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`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, @@ -14,11 +15,11 @@ const FormActiveRedirect = (formData: FormData) => { const response = await result.json(); setFormActive(response.isActive); setLoading(false); - }; + }, [formData.backendFormName]); useEffect(() => { - handleCheckForm().then(r => {}); - }, []); + handleCheckForm().then(() => {}); + }, [handleCheckForm]); if (isLoading) { return

Checking if form is active

; @@ -32,4 +33,5 @@ const FormActiveRedirect = (formData: FormData) => { ); } + export default FormActiveRedirect; \ No newline at end of file