diff --git a/apps/demos/Demos/Gantt/Appearance/React/App.tsx b/apps/demos/Demos/Gantt/Appearance/React/App.tsx
index 487f37685be0..172b1e0228eb 100644
--- a/apps/demos/Demos/Gantt/Appearance/React/App.tsx
+++ b/apps/demos/Demos/Gantt/Appearance/React/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import Gantt, {
   Tasks, Dependencies, Resources, ResourceAssignments, Column, Editing,
 } from 'devextreme-react/gantt';
@@ -35,17 +35,19 @@ const initialGanttConfig = {
 
 function App() {
   const [ganttConfig, setGanttConfig] = useState(initialGanttConfig);
-  const updateGanttConfig = (value: Partial<typeof initialGanttConfig>) => setGanttConfig({
-    ...ganttConfig,
-    ...value,
-  });
-  const onScaleTypeChanged: ISelectBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ scaleType: value });
-  const onTaskTitlePositionChanged: ISelectBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ taskTitlePosition: value });
-  const onShowResourcesChanged: ICheckBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ showResources: value });
-  const onShowDependenciesChanged: ICheckBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ showDependencies: value });
-  const onShowCustomTaskTooltip: ICheckBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ showCustomTaskTooltip: value });
-  const onStartDateValueChanged: IDateBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ startDateRange: value });
-  const onEndDateValueChanged: IDateBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ endDateRange: value });
+  const updateGanttConfig = useCallback((value: Partial<typeof initialGanttConfig>) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
+      ...value,
+    }));
+  }, []);
+  const onScaleTypeChanged: ISelectBoxOptions['onValueChanged'] = useCallback(({ value }) => updateGanttConfig({ scaleType: value }), [updateGanttConfig]);
+  const onTaskTitlePositionChanged: ISelectBoxOptions['onValueChanged'] = useCallback(({ value }) => updateGanttConfig({ taskTitlePosition: value }), [updateGanttConfig]);
+  const onShowResourcesChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => updateGanttConfig({ showResources: value }), [updateGanttConfig]);
+  const onShowDependenciesChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => updateGanttConfig({ showDependencies: value }), [updateGanttConfig]);
+  const onShowCustomTaskTooltip: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => updateGanttConfig({ showCustomTaskTooltip: value }), [updateGanttConfig]);
+  const onStartDateValueChanged: IDateBoxOptions['onValueChanged'] = useCallback(({ value }) => updateGanttConfig({ startDateRange: value }), [updateGanttConfig]);
+  const onEndDateValueChanged: IDateBoxOptions['onValueChanged'] = useCallback(({ value }) => updateGanttConfig({ endDateRange: value }), [updateGanttConfig]);
 
   return (
     <div id="form-demo">
diff --git a/apps/demos/Demos/Gantt/Appearance/ReactJs/App.js b/apps/demos/Demos/Gantt/Appearance/ReactJs/App.js
index e0c04dee0bb7..82ddde9a5193 100644
--- a/apps/demos/Demos/Gantt/Appearance/ReactJs/App.js
+++ b/apps/demos/Demos/Gantt/Appearance/ReactJs/App.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import Gantt, {
   Tasks,
   Dependencies,
@@ -39,19 +39,40 @@ const initialGanttConfig = {
 };
 function App() {
   const [ganttConfig, setGanttConfig] = useState(initialGanttConfig);
-  const updateGanttConfig = (value) =>
-    setGanttConfig({
-      ...ganttConfig,
+  const updateGanttConfig = useCallback((value) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       ...value,
-    });
-  const onScaleTypeChanged = ({ value }) => updateGanttConfig({ scaleType: value });
-  const onTaskTitlePositionChanged = ({ value }) => updateGanttConfig({ taskTitlePosition: value });
-  const onShowResourcesChanged = ({ value }) => updateGanttConfig({ showResources: value });
-  const onShowDependenciesChanged = ({ value }) => updateGanttConfig({ showDependencies: value });
-  const onShowCustomTaskTooltip = ({ value }) =>
-    updateGanttConfig({ showCustomTaskTooltip: value });
-  const onStartDateValueChanged = ({ value }) => updateGanttConfig({ startDateRange: value });
-  const onEndDateValueChanged = ({ value }) => updateGanttConfig({ endDateRange: value });
+    }));
+  }, []);
+  const onScaleTypeChanged = useCallback(
+    ({ value }) => updateGanttConfig({ scaleType: value }),
+    [updateGanttConfig],
+  );
+  const onTaskTitlePositionChanged = useCallback(
+    ({ value }) => updateGanttConfig({ taskTitlePosition: value }),
+    [updateGanttConfig],
+  );
+  const onShowResourcesChanged = useCallback(
+    ({ value }) => updateGanttConfig({ showResources: value }),
+    [updateGanttConfig],
+  );
+  const onShowDependenciesChanged = useCallback(
+    ({ value }) => updateGanttConfig({ showDependencies: value }),
+    [updateGanttConfig],
+  );
+  const onShowCustomTaskTooltip = useCallback(
+    ({ value }) => updateGanttConfig({ showCustomTaskTooltip: value }),
+    [updateGanttConfig],
+  );
+  const onStartDateValueChanged = useCallback(
+    ({ value }) => updateGanttConfig({ startDateRange: value }),
+    [updateGanttConfig],
+  );
+  const onEndDateValueChanged = useCallback(
+    ({ value }) => updateGanttConfig({ endDateRange: value }),
+    [updateGanttConfig],
+  );
   return (
     <div id="form-demo">
       <div className="options">
diff --git a/apps/demos/Demos/Gantt/ContextMenu/React/App.tsx b/apps/demos/Demos/Gantt/ContextMenu/React/App.tsx
index 67c998fea644..67ad0d468a89 100644
--- a/apps/demos/Demos/Gantt/ContextMenu/React/App.tsx
+++ b/apps/demos/Demos/Gantt/ContextMenu/React/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import Gantt, {
   Tasks, Dependencies, Resources, ResourceAssignments, Column, Editing, ContextMenu,
 } from 'devextreme-react/gantt';
@@ -16,19 +16,19 @@ function App() {
     disableContextMenu: false,
     contextMenuItems: getContextMenuItems(),
   });
-  const onCustomizeContextMenu: ICheckBoxOptions['onValueChanged'] = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+  const onCustomizeContextMenu: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       contextMenuItems: value ? getContextMenuItems() : undefined,
-    });
-  };
+    }));
+  }, []);
 
-  const onPreventContextMenuShowing: ICheckBoxOptions['onValueChanged'] = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+  const onPreventContextMenuShowing: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       disableContextMenu: value,
-    });
-  };
+    }));
+  }, []);
 
   return (
     <div id="form-demo">
diff --git a/apps/demos/Demos/Gantt/ContextMenu/ReactJs/App.js b/apps/demos/Demos/Gantt/ContextMenu/ReactJs/App.js
index e23d7ccac2e0..45fb15b78c40 100644
--- a/apps/demos/Demos/Gantt/ContextMenu/ReactJs/App.js
+++ b/apps/demos/Demos/Gantt/ContextMenu/ReactJs/App.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import Gantt, {
   Tasks,
   Dependencies,
@@ -19,18 +19,18 @@ function App() {
     disableContextMenu: false,
     contextMenuItems: getContextMenuItems(),
   });
-  const onCustomizeContextMenu = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+  const onCustomizeContextMenu = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       contextMenuItems: value ? getContextMenuItems() : undefined,
-    });
-  };
-  const onPreventContextMenuShowing = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+    }));
+  }, []);
+  const onPreventContextMenuShowing = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       disableContextMenu: value,
-    });
-  };
+    }));
+  }, []);
   return (
     <div id="form-demo">
       <div className="options">
diff --git a/apps/demos/Demos/Gantt/Sorting/React/App.tsx b/apps/demos/Demos/Gantt/Sorting/React/App.tsx
index afd0ce6cb7cf..5b0728d9d00a 100644
--- a/apps/demos/Demos/Gantt/Sorting/React/App.tsx
+++ b/apps/demos/Demos/Gantt/Sorting/React/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import Gantt, {
   Tasks, Dependencies, Resources, ResourceAssignments, Column, Editing, Sorting,
 } from 'devextreme-react/gantt';
@@ -19,20 +19,20 @@ function App() {
     showSortIndexes: false,
     showSortIndexesDisabled: true,
   });
-  const onSortingModeChanged: ISelectBoxOptions['onValueChanged'] = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+  const onSortingModeChanged: ISelectBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       sortingMode: value,
       showSortIndexesDisabled: value !== 'multiple',
-    });
-  };
+    }));
+  }, []);
 
-  const onShowSortIndexesChanged: ICheckBoxOptions['onValueChanged'] = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+  const onShowSortIndexesChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       showSortIndexes: value,
-    });
-  };
+    }));
+  }, []);
 
   return (
     <div id="form-demo">
diff --git a/apps/demos/Demos/Gantt/Sorting/ReactJs/App.js b/apps/demos/Demos/Gantt/Sorting/ReactJs/App.js
index 8974a61822d0..2d36301a548a 100644
--- a/apps/demos/Demos/Gantt/Sorting/ReactJs/App.js
+++ b/apps/demos/Demos/Gantt/Sorting/ReactJs/App.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import Gantt, {
   Tasks,
   Dependencies,
@@ -22,19 +22,19 @@ function App() {
     showSortIndexes: false,
     showSortIndexesDisabled: true,
   });
-  const onSortingModeChanged = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+  const onSortingModeChanged = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       sortingMode: value,
       showSortIndexesDisabled: value !== 'multiple',
-    });
-  };
-  const onShowSortIndexesChanged = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+    }));
+  }, []);
+  const onShowSortIndexesChanged = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       showSortIndexes: value,
-    });
-  };
+    }));
+  }, []);
   return (
     <div id="form-demo">
       <div className="options">
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/React/TaskTemplate.tsx b/apps/demos/Demos/Gantt/TaskTemplate/React/TaskTemplate.tsx
index 83631e2f103c..2d780fba7de7 100644
--- a/apps/demos/Demos/Gantt/TaskTemplate/React/TaskTemplate.tsx
+++ b/apps/demos/Demos/Gantt/TaskTemplate/React/TaskTemplate.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 interface TaskTemplateProps {
   taskData: {
@@ -26,8 +26,10 @@ function getTaskColor(taskId: number) {
 }
 
 export default function TaskTemplate({ taskData, taskSize, taskResources }: TaskTemplateProps) {
+  const taskWrapperStyle = useMemo(() => ({ width: `${taskSize.width}px` }), [taskSize.width]);
+  const progressStyle = useMemo(() => ({ width: `${taskData.progress}%` }), [taskData.progress]);
   return (
-    <div className={`custom-task ${getTaskColor(taskData.id)}`} style={ { width: `${taskSize.width}px` } }>
+    <div className={`custom-task ${getTaskColor(taskData.id)}`} style={taskWrapperStyle}>
       <div className="custom-task-img-wrapper">
         <img className="custom-task-img" src={getImagePath(taskData.id)} />
       </div>
@@ -35,7 +37,7 @@ export default function TaskTemplate({ taskData, taskSize, taskResources }: Task
         <div className='custom-task-title'>{taskData.title}</div>
         <div className='custom-task-row'>{taskResources[0].text}</div>
       </div>
-      <div className='custom-task-progress' style={ { width: `${taskData.progress}%` } }></div>
+      <div className='custom-task-progress' style={progressStyle}></div>
     </div>
   );
 }
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/TaskTemplate.js b/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/TaskTemplate.js
index ef3f65f3808c..1cb941b96d7f 100644
--- a/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/TaskTemplate.js
+++ b/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/TaskTemplate.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 function getImagePath(taskId) {
   const imgPath = '../../../../images/employees';
@@ -11,10 +11,12 @@ function getTaskColor(taskId) {
   return `custom-task-color-${color}`;
 }
 export default function TaskTemplate({ taskData, taskSize, taskResources }) {
+  const taskWrapperStyle = useMemo(() => ({ width: `${taskSize.width}px` }), [taskSize.width]);
+  const progressStyle = useMemo(() => ({ width: `${taskData.progress}%` }), [taskData.progress]);
   return (
     <div
       className={`custom-task ${getTaskColor(taskData.id)}`}
-      style={{ width: `${taskSize.width}px` }}
+      style={taskWrapperStyle}
     >
       <div className="custom-task-img-wrapper">
         <img
@@ -28,7 +30,7 @@ export default function TaskTemplate({ taskData, taskSize, taskResources }) {
       </div>
       <div
         className="custom-task-progress"
-        style={{ width: `${taskData.progress}%` }}
+        style={progressStyle}
       ></div>
     </div>
   );
diff --git a/apps/demos/Demos/Gantt/Validation/React/App.tsx b/apps/demos/Demos/Gantt/Validation/React/App.tsx
index 46e042dcd933..ac251413411d 100644
--- a/apps/demos/Demos/Gantt/Validation/React/App.tsx
+++ b/apps/demos/Demos/Gantt/Validation/React/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import Gantt, {
   Tasks, Dependencies, Column, Validation, Editing,
 } from 'devextreme-react/gantt';
@@ -13,26 +13,26 @@ function App() {
     enablePredecessorGap: true,
   });
 
-  const onEnablePredecessorGapChanged: ICheckBoxOptions['onValueChanged'] = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+  const onEnablePredecessorGapChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       enablePredecessorGap: value,
-    });
-  };
+    }));
+  }, []);
 
-  const onAutoUpdateParentTasksChanged: ICheckBoxOptions['onValueChanged'] = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+  const onAutoUpdateParentTasksChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       autoUpdateParentTasks: value,
-    });
-  };
+    }));
+  }, []);
 
-  const onValidateDependenciesChanged: ICheckBoxOptions['onValueChanged'] = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+  const onValidateDependenciesChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       validateDependencies: value,
-    });
-  };
+    }));
+  }, []);
 
   return (
     <div id="form-demo">
diff --git a/apps/demos/Demos/Gantt/Validation/ReactJs/App.js b/apps/demos/Demos/Gantt/Validation/ReactJs/App.js
index 94aadd50ba26..4ec60773c732 100644
--- a/apps/demos/Demos/Gantt/Validation/ReactJs/App.js
+++ b/apps/demos/Demos/Gantt/Validation/ReactJs/App.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import Gantt, {
   Tasks, Dependencies, Column, Validation, Editing,
 } from 'devextreme-react/gantt';
@@ -11,24 +11,24 @@ function App() {
     validateDependencies: true,
     enablePredecessorGap: true,
   });
-  const onEnablePredecessorGapChanged = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+  const onEnablePredecessorGapChanged = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       enablePredecessorGap: value,
-    });
-  };
-  const onAutoUpdateParentTasksChanged = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+    }));
+  }, []);
+  const onAutoUpdateParentTasksChanged = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       autoUpdateParentTasks: value,
-    });
-  };
-  const onValidateDependenciesChanged = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+    }));
+  }, []);
+  const onValidateDependenciesChanged = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       validateDependencies: value,
-    });
-  };
+    }));
+  }, []);
   return (
     <div id="form-demo">
       <div className="options">