From 5070c378f4ded7b68a689947dc8061be0231d2a1 Mon Sep 17 00:00:00 2001 From: krishhna Date: Mon, 9 Feb 2026 17:55:02 +0530 Subject: [PATCH] fix: memory leak and layou shift issue --- pages/finance.tsx | 41 ++++++++++++++++++++++++++++------------- 1 file changed, 28 insertions(+), 13 deletions(-) diff --git a/pages/finance.tsx b/pages/finance.tsx index a6e6bf59050d..903746c61b20 100644 --- a/pages/finance.tsx +++ b/pages/finance.tsx @@ -1,5 +1,5 @@ import Head from 'next/head'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import AsyncAPISummary from '../components/FinancialSummary/AsyncAPISummary'; import BarChartComponent from '../components/FinancialSummary/BarChartComponent'; @@ -16,21 +16,24 @@ import Container from '../components/layout/Container'; * bar chart, success stories, and contact us components. */ export default function FinancialSummary() { - const [windowWidth, setWindowWidth] = useState(0); + // Initialize as null to avoid hydration/layout shift + const [windowWidth, setWindowWidth] = useState(null); + const handleResize = () => { + console.log("resized") + setWindowWidth(window.innerWidth); + }; + + // Properly scoped resize handler with correct cleanup + useEffect(() => { - const handleResizeRef = useRef<() => void>(null!); - handleResizeRef.current = () => { - setWindowWidth(window.innerWidth); - }; + // Set initial width on mount + handleResize(); - // Handle window resize event to update the window width state value for responsive design purposes - useEffect(() => { - handleResizeRef.current!(); - window.addEventListener('resize', handleResizeRef.current!); + window.addEventListener('resize', handleResize); return () => { - window.removeEventListener('resize', handleResizeRef.current!); + window.removeEventListener('resize', handleResize); }; }, []); @@ -41,8 +44,9 @@ export default function FinancialSummary() { <> {title} - + + @@ -53,7 +57,18 @@ export default function FinancialSummary() { ); + // Avoid rendering until window size is known (prevents CLS) + if (windowWidth === null) { + return null; // or a skeleton/loading placeholder + } + const shouldUseContainer = windowWidth > 1700; - return
{shouldUseContainer ? {renderComponents()} : renderComponents()}
; + return ( +
+
+ {renderComponents()} +
+
+ ); }