diff --git a/CHANGELOG.md b/CHANGELOG.md
index 97c58df42..481f00a0a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -47,6 +47,7 @@ A comprehensive modernization of all Angular templates to align with Angular v21
 ### React & Web Components Template Updates
 
 * **React (`igr-ts`):** added 30 missing component templates (accordion, avatar, badge, banner, button, button-group, calendar, card, checkbox, chip, circular-progress, date-picker, divider, dropdown, expansion-panel, form, icon, icon-button, input, linear-progress, list, navbar, radio-group, rating, ripple, slider, switch, tabs, text-area, tree) to match Web Components template coverage ([#1576](https://github.com/IgniteUI/igniteui-cli/pull/1576))
+* **React (`igr-ts`):** updated project template to latest with vite@8 ([#1598](https://github.com/IgniteUI/igniteui-cli/pull/1598))
 * **React packages update:** updated `igniteui-react-core/charts/gauges` to ~19.5.2 and `igniteui-react[-grids]` to ~19.6.0 ([#1567](https://github.com/IgniteUI/igniteui-cli/pull/1567))
 * **Web Components packages update:** updated igniteui-webcomponents packages to latest ([#1566](https://github.com/IgniteUI/igniteui-cli/pull/1566))
 * **Web Components grid fixes:** corrected component usage and dependencies in grid templates ([#1562](https://github.com/IgniteUI/igniteui-cli/pull/1562))
diff --git a/packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.tsx
index 73e73d1a0..d7fcd9448 100644
--- a/packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { IgrCategoryChartModule } from 'igniteui-react-charts';
 import { IgrCategoryChart } from 'igniteui-react-charts';
 import style from './style.module.css';
@@ -15,11 +15,7 @@ const data: any = [
 
 export default function $(ClassName)() {
   const title = 'Category Chart';
-  const [chartData, setChartData] = useState([]);
-
-  useEffect(() => {
-    setChartData(data);
-  }, []);
+  const [chartData] = useState(data);
 
   return (
     <div>
diff --git a/packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.tsx
index ca39e7e75..4b0866791 100644
--- a/packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import { IgrDoughnutChartModule } from 'igniteui-react-charts';
 import { IgrDoughnutChart } from 'igniteui-react-charts';
 import { IgrRingSeriesModule } from 'igniteui-react-charts';
@@ -23,13 +23,8 @@ const data: any = [
 
 export default function $(ClassName)() {
   const title = 'Doughnut Chart';
-  const [chartData, setChartData] = useState([]);
-  const legendRef: any = useRef(null);
-  const chartRef: any = useRef(null);
-
-  useEffect(() => {
-    setChartData(data);
-  }, []);
+  const [chartData] = useState(data);
+  const [legend, setLegend] = useState<IgrItemLegend | null>(null);
 
   return (
     <div>
@@ -42,10 +37,10 @@ export default function $(ClassName)() {
       </div>
       <div className={style.container}>
         <div className={style.legend}>
-          <IgrItemLegend ref={legendRef} />
+          <IgrItemLegend ref={setLegend} />
         </div>
         <div className={style.chart}>
-          <IgrDoughnutChart ref={chartRef}
+          <IgrDoughnutChart
             width="300px"
             height="300px">
             <IgrRingSeries
@@ -53,7 +48,7 @@ export default function $(ClassName)() {
               dataSource={chartData}
               labelMemberPath="Company"
               valueMemberPath="MarketShare"
-              legend={legendRef.current}
+              legend={legend}
               />
           </IgrDoughnutChart>
         </div>
diff --git a/packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.tsx
index ca3c976e8..cbc6924ea 100644
--- a/packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react';
 import { IgrFinancialChartModule } from 'igniteui-react-charts';
 import { IgrFinancialChart } from 'igniteui-react-charts';
 import style from './style.module.css';
@@ -22,11 +22,7 @@ const data: any = [
 
 export default function $(ClassName)() {
   const title = 'Financial Chart';
-  const [chartData, setChartData] = useState([]);
-
-  useEffect(() => {
-    setChartData(data);
-  }, []);
+  const [chartData] = useState(data);
 
   return (
     <div>
diff --git a/packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.tsx
index f6442bbcf..e358c8fcf 100644
--- a/packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import { IgrPieChartModule } from 'igniteui-react-charts';
 import { IgrPieChart } from 'igniteui-react-charts';
 import { IgrItemLegend } from 'igniteui-react-charts';
@@ -18,13 +18,8 @@ const data: any = [
 
 export default function $(ClassName)() {
   const title = 'Pie Chart';
-  const [chartData, setChartData] = useState([]);
-  const legendRef: any = useRef(null);
-  const chartRef: any = useRef(null);
-
-  useEffect(() => {
-    setChartData(data);
-  }, []);
+  const [chartData] = useState(data);
+  const [legend, setLegend] = useState<IgrItemLegend | null>(null);
 
   return (
     <div>
@@ -37,7 +32,7 @@ export default function $(ClassName)() {
       </div>
       <div className={style.container}>
         <div className={style.legend}>
-          <IgrItemLegend ref={legendRef} />
+          <IgrItemLegend ref={setLegend} />
         </div>
         <div className={style.chart}>
           <IgrPieChart dataSource={chartData}
@@ -45,9 +40,8 @@ export default function $(ClassName)() {
             valueMemberPath="MarketShare"
             width="500px"
             height="500px"
-            ref={chartRef}
             legendLabelMemberPath="Label"
-            legend={legendRef.current}
+            legend={legend}
           />
         </div>
       </div>