diff --git a/apps/demos/Demos/CardView/FieldTemplate/React/Progress.tsx b/apps/demos/Demos/CardView/FieldTemplate/React/Progress.tsx
index 8e42f9c1a94d..cb65d2f9ae93 100644
--- a/apps/demos/Demos/CardView/FieldTemplate/React/Progress.tsx
+++ b/apps/demos/Demos/CardView/FieldTemplate/React/Progress.tsx
@@ -5,12 +5,15 @@ interface ProgressProps {
   value: number;
 }
 
+const progressElementAttributes = { 'aria-label': 'Progress Bar' };
+const formatPercent = (_: unknown, value: number) => `${value}%`;
+
 const Progress = ({ value }: ProgressProps) => (
   <div className="task__progress">
     <ProgressBar
       value={value}
-      elementAttr={{ 'aria-label': 'Progress Bar' }}
-      statusFormat={(_, value: number) => `${value}%`}
+      elementAttr={progressElementAttributes}
+      statusFormat={formatPercent}
     />
   </div>
 );
diff --git a/apps/demos/Demos/CardView/FieldTemplate/ReactJs/Progress.js b/apps/demos/Demos/CardView/FieldTemplate/ReactJs/Progress.js
index a40b505fda87..efdc15cbd741 100644
--- a/apps/demos/Demos/CardView/FieldTemplate/ReactJs/Progress.js
+++ b/apps/demos/Demos/CardView/FieldTemplate/ReactJs/Progress.js
@@ -1,12 +1,14 @@
 import React from 'react';
 import { ProgressBar } from 'devextreme-react/progress-bar';
 
+const progressElementAttributes = { 'aria-label': 'Progress Bar' };
+const formatPercent = (_, value) => `${value}%`;
 const Progress = ({ value }) => (
   <div className="task__progress">
     <ProgressBar
       value={value}
-      elementAttr={{ 'aria-label': 'Progress Bar' }}
-      statusFormat={(_, value) => `${value}%`}
+      elementAttr={progressElementAttributes}
+      statusFormat={formatPercent}
     />
   </div>
 );
diff --git a/apps/demos/Demos/CardView/FieldTemplate/ReactJs/index.html b/apps/demos/Demos/CardView/FieldTemplate/ReactJs/index.html
index b6ad2f9b1595..7b47950bbaff 100644
--- a/apps/demos/Demos/CardView/FieldTemplate/ReactJs/index.html
+++ b/apps/demos/Demos/CardView/FieldTemplate/ReactJs/index.html
@@ -12,7 +12,6 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
-    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/DataGrid/AIAssistant/React/App.tsx b/apps/demos/Demos/DataGrid/AIAssistant/React/App.tsx
index e946c12b7744..9eb3af60410e 100644
--- a/apps/demos/Demos/DataGrid/AIAssistant/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/AIAssistant/React/App.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 
 import DataGrid, {
   Column,
@@ -76,7 +76,7 @@ export default function App() {
     }]);
   }, []);
 
-  const chatOptions: ChatTypes.Properties = {
+  const chatOptions = useMemo<ChatTypes.Properties>(() => ({
     onInitialized: onChatInitialized,
     user: {
       id: 'user',
@@ -85,7 +85,7 @@ export default function App() {
       ...suggestions,
       onItemClick: onSuggestionItemClick,
     },
-  };
+  }), [onChatInitialized, onSuggestionItemClick]);
 
   return (
     <DataGrid
diff --git a/apps/demos/Demos/DataGrid/AIAssistant/ReactJs/App.js b/apps/demos/Demos/DataGrid/AIAssistant/ReactJs/App.js
index 5cdf12191754..7247d2391fb2 100644
--- a/apps/demos/Demos/DataGrid/AIAssistant/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/AIAssistant/ReactJs/App.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import DataGrid, {
   Column,
   Paging,
@@ -69,16 +69,19 @@ export default function App() {
         },
       ]);
   }, []);
-  const chatOptions = {
-    onInitialized: onChatInitialized,
-    user: {
-      id: 'user',
-    },
-    suggestions: {
-      ...suggestions,
-      onItemClick: onSuggestionItemClick,
-    },
-  };
+  const chatOptions = useMemo(
+    () => ({
+      onInitialized: onChatInitialized,
+      user: {
+        id: 'user',
+      },
+      suggestions: {
+        ...suggestions,
+        onItemClick: onSuggestionItemClick,
+      },
+    }),
+    [onChatInitialized, onSuggestionItemClick],
+  );
   return (
     <DataGrid
       id="gridContainer"
diff --git a/apps/demos/Demos/DataGrid/AIColumns/React/App.tsx b/apps/demos/Demos/DataGrid/AIColumns/React/App.tsx
index 2daea172a4b8..bb0234dcd307 100644
--- a/apps/demos/Demos/DataGrid/AIColumns/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/AIColumns/React/App.tsx
@@ -36,6 +36,17 @@ export default function App() {
     setCurrentVehicle(null);
   }, []);
 
+  const renderTrademark = useCallback((cellData: DataGridTypes.ColumnCellTemplateData) => (
+    <Trademark
+      vehicle={cellData.data}
+      onShowInfo={showInfo}
+    />
+  ), [showInfo]);
+
+  const renderLicenseInfo = useCallback(() => (
+    <LicenseInfo vehicle={currentVehicle} />
+  ), [currentVehicle]);
+
   return (
     <>
       <DataGrid
@@ -55,12 +66,7 @@ export default function App() {
           caption="Trademark"
           width={200}
           dataField="TrademarkName"
-          cellRender={(cellData) =>
-            <Trademark
-              vehicle={cellData.data}
-              onShowInfo={showInfo}
-            />
-          }
+          cellRender={renderTrademark}
         />
         <Column
           dataField="Price"
@@ -110,9 +116,7 @@ export default function App() {
         hideOnOutsideClick={true}
         title="Image Info"
         onHiding={hideInfo}
-        contentRender={() =>
-          <LicenseInfo vehicle={currentVehicle} />
-        }
+        contentRender={renderLicenseInfo}
       >
         <Position
           at="center"
diff --git a/apps/demos/Demos/DataGrid/AIColumns/React/Trademark.tsx b/apps/demos/Demos/DataGrid/AIColumns/React/Trademark.tsx
index c4d74f7e6381..dd97f3a735f0 100644
--- a/apps/demos/Demos/DataGrid/AIColumns/React/Trademark.tsx
+++ b/apps/demos/Demos/DataGrid/AIColumns/React/Trademark.tsx
@@ -15,6 +15,8 @@ export default function Trademark({ vehicle, onShowInfo }: TrademarkProps) {
     }
   }, [onShowInfo, vehicle]);
 
+  const onClick = useCallback(() => onShowInfo(vehicle), [onShowInfo, vehicle]);
+
   return (
     <div className="trademark__wrapper">
       <div className="trademark__img-wrapper">
@@ -23,7 +25,7 @@ export default function Trademark({ vehicle, onShowInfo }: TrademarkProps) {
           src={`../../../../images/vehicles/image_${ID}.png`}
           alt={`${TrademarkName} ${Name}`}
           tabIndex={0}
-          onClick={() => onShowInfo(vehicle)}
+          onClick={onClick}
           role="button"
           onKeyDown={onKeyDown}
           aria-haspopup="dialog"
diff --git a/apps/demos/Demos/DataGrid/AIColumns/ReactJs/App.js b/apps/demos/Demos/DataGrid/AIColumns/ReactJs/App.js
index 44edf7fbb179..b974f5a2eca5 100644
--- a/apps/demos/Demos/DataGrid/AIColumns/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/AIColumns/ReactJs/App.js
@@ -25,6 +25,19 @@ export default function App() {
   const hideInfo = useCallback(() => {
     setCurrentVehicle(null);
   }, []);
+  const renderTrademark = useCallback(
+    (cellData) => (
+      <Trademark
+        vehicle={cellData.data}
+        onShowInfo={showInfo}
+      />
+    ),
+    [showInfo],
+  );
+  const renderLicenseInfo = useCallback(
+    () => <LicenseInfo vehicle={currentVehicle} />,
+    [currentVehicle],
+  );
   return (
     <>
       <DataGrid
@@ -44,12 +57,7 @@ export default function App() {
           caption="Trademark"
           width={200}
           dataField="TrademarkName"
-          cellRender={(cellData) => (
-            <Trademark
-              vehicle={cellData.data}
-              onShowInfo={showInfo}
-            />
-          )}
+          cellRender={renderTrademark}
         />
         <Column
           dataField="Price"
@@ -99,7 +107,7 @@ export default function App() {
         hideOnOutsideClick={true}
         title="Image Info"
         onHiding={hideInfo}
-        contentRender={() => <LicenseInfo vehicle={currentVehicle} />}
+        contentRender={renderLicenseInfo}
       >
         <Position
           at="center"
diff --git a/apps/demos/Demos/DataGrid/AIColumns/ReactJs/Trademark.js b/apps/demos/Demos/DataGrid/AIColumns/ReactJs/Trademark.js
index 2971ca0a6fb7..4cc85d09e83d 100644
--- a/apps/demos/Demos/DataGrid/AIColumns/ReactJs/Trademark.js
+++ b/apps/demos/Demos/DataGrid/AIColumns/ReactJs/Trademark.js
@@ -10,6 +10,7 @@ export default function Trademark({ vehicle, onShowInfo }) {
     },
     [onShowInfo, vehicle],
   );
+  const onClick = useCallback(() => onShowInfo(vehicle), [onShowInfo, vehicle]);
   return (
     <div className="trademark__wrapper">
       <div className="trademark__img-wrapper">
@@ -18,7 +19,7 @@ export default function Trademark({ vehicle, onShowInfo }) {
           src={`../../../../images/vehicles/image_${ID}.png`}
           alt={`${TrademarkName} ${Name}`}
           tabIndex={0}
-          onClick={() => onShowInfo(vehicle)}
+          onClick={onClick}
           role="button"
           onKeyDown={onKeyDown}
           aria-haspopup="dialog"
diff --git a/apps/demos/Demos/DataGrid/CustomEditors/React/App.tsx b/apps/demos/Demos/DataGrid/CustomEditors/React/App.tsx
index 531d01b545ba..1438ccfbcb7d 100644
--- a/apps/demos/Demos/DataGrid/CustomEditors/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/CustomEditors/React/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import DataGrid, {
   Paging,
@@ -73,36 +73,41 @@ function calculateFilterExpression(
 
 const onRowInserted = (e: DataGridTypes.RowInsertedEvent) => e.component.navigateToRow(e.key);
 
-const statusEditorRender = (cell: DataGridTypes.ColumnEditCellTemplateData) => {
-  const onValueChanged = (e: SelectBoxTypes.ValueChangedEvent) => cell.setValue(e.value);
+const statusEditorRender = (cell: DataGridTypes.ColumnEditCellTemplateData) => <StatusEditor cell={cell} />;
 
-  const itemRender = (data: { id: number, name: string } | null) => {
-    if (data) {
-      const imageSource = `images/icons/status-${data.id}.svg`;
+const statusItemRender = (data: { id: number, name: string } | null) => {
+  if (data) {
+    const imageSource = `images/icons/status-${data.id}.svg`;
 
-      return (
-        <div>
-          <img src={imageSource} className="status-icon middle"></img>
-          <span className="middle">{data.name}</span>
-        </div>
-      );
-    }
+    return (
+      <div>
+        <img src={imageSource} className="status-icon middle"></img>
+        <span className="middle">{data.name}</span>
+      </div>
+    );
+  }
 
-    return <span>(All)</span>;
-  };
+  return <span>(All)</span>;
+};
 
+const StatusEditor = ({ cell }: { cell: DataGridTypes.ColumnEditCellTemplateData }) => {
   const lookupDataSource = cell.column.lookup?.dataSource;
   const dataSource = typeof lookupDataSource === 'function'
     ? lookupDataSource({ data: cell.data, key: cell.row.key })
     : lookupDataSource;
+  const onValueChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
+    cell.setValue(e.value);
+  }, [cell]);
 
   return (
     <SelectBox
       defaultValue={cell.value}
       dataSource={dataSource}
+      displayExpr="name"
+      valueExpr="id"
       onValueChanged={onValueChanged}
       inputAttr={statusLabel}
-      itemRender={itemRender} />
+      itemRender={statusItemRender} />
   );
 };
 
diff --git a/apps/demos/Demos/DataGrid/CustomEditors/React/EmployeeDropDownBoxComponent.tsx b/apps/demos/Demos/DataGrid/CustomEditors/React/EmployeeDropDownBoxComponent.tsx
index c7f30924b288..69024a643cdd 100644
--- a/apps/demos/Demos/DataGrid/CustomEditors/React/EmployeeDropDownBoxComponent.tsx
+++ b/apps/demos/Demos/DataGrid/CustomEditors/React/EmployeeDropDownBoxComponent.tsx
@@ -11,9 +11,12 @@ import DropDownBox, { type DropDownBoxTypes } from 'devextreme-react/drop-down-b
 
 const dropDownOptions = { width: 500 };
 const ownerLabel = { 'aria-label': 'Owner' };
+const clearContextMenu = (event: DataGridTypes.ContextMenuPreparingEvent) => {
+  event.items = [];
+};
 
-const EmployeeDropDownBoxComponent = (props: DataGridTypes.ColumnCellTemplateData) => {
-  const { data: { value: dataValue } } = props;
+const EmployeeDropDownBoxComponent = ({ data }: DataGridTypes.ColumnCellTemplateData) => {
+  const { value: dataValue } = data;
   const initialSelectedRowKeys = dataValue !== null && dataValue !== undefined ? [dataValue] : [];
   const [selectedRowKeys, setSelectedRowKeys] = useState(initialSelectedRowKeys);
   const [isDropDownOpened, setDropDownOpened] = useState(false);
@@ -24,48 +27,43 @@ const EmployeeDropDownBoxComponent = (props: DataGridTypes.ColumnCellTemplateDat
     }
   }, []);
 
-  const contentRender = useCallback(() => {
-    const onContextMenuPreparing = (event: DataGridTypes.ContextMenuPreparingEvent) => {
-      event.items = [];
-    };
-    const onSelectionChanged = (args: DataGridTypes.SelectionChangedEvent) => {
-      setSelectedRowKeys(args.selectedRowKeys);
-      setDropDownOpened(false);
+  const onSelectionChanged = useCallback((args: DataGridTypes.SelectionChangedEvent) => {
+    setSelectedRowKeys(args.selectedRowKeys);
+    setDropDownOpened(false);
 
-      props.data.setValue(args.selectedRowKeys[0]);
-    };
+    data.setValue(args.selectedRowKeys[0]);
+  }, [data]);
 
-    return (
-      <DataGrid
-        dataSource={props.data.column.lookup.dataSource}
-        remoteOperations={true}
-        height={250}
-        selectedRowKeys={selectedRowKeys}
-        hoverStateEnabled={true}
-        onContextMenuPreparing={onContextMenuPreparing}
-        onSelectionChanged={onSelectionChanged}
-        focusedRowEnabled={true}
-        defaultFocusedRowKey={selectedRowKeys[0]}
-      >
-        <Column dataField="FullName" />
-        <Column dataField="Title" />
-        <Column dataField="Department" />
-        <Paging
-          enabled={true}
-          defaultPageSize={10}
-        />
-        <Scrolling mode="virtual" />
-        <Selection mode="single" />
-      </DataGrid>
-    );
-  }, [props.data, selectedRowKeys]);
+  const contentRender = useCallback(() => (
+    <DataGrid
+      dataSource={data.column.lookup.dataSource}
+      remoteOperations={true}
+      height={250}
+      selectedRowKeys={selectedRowKeys}
+      hoverStateEnabled={true}
+      onContextMenuPreparing={clearContextMenu}
+      onSelectionChanged={onSelectionChanged}
+      focusedRowEnabled={true}
+      defaultFocusedRowKey={selectedRowKeys[0]}
+    >
+      <Column dataField="FullName" />
+      <Column dataField="Title" />
+      <Column dataField="Department" />
+      <Paging
+        enabled={true}
+        defaultPageSize={10}
+      />
+      <Scrolling mode="virtual" />
+      <Selection mode="single" />
+    </DataGrid>
+  ), [data, onSelectionChanged, selectedRowKeys]);
 
   return (
     <DropDownBox
       onOptionChanged={boxOptionChanged}
       opened={isDropDownOpened}
       dropDownOptions={dropDownOptions}
-      dataSource={props.data.column.lookup.dataSource}
+      dataSource={data.column.lookup.dataSource}
       value={selectedRowKeys[0]}
       displayExpr="FullName"
       valueExpr="ID"
diff --git a/apps/demos/Demos/DataGrid/CustomEditors/ReactJs/App.js b/apps/demos/Demos/DataGrid/CustomEditors/ReactJs/App.js
index 1eb4fd660953..0fd75ff93033 100644
--- a/apps/demos/Demos/DataGrid/CustomEditors/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/CustomEditors/ReactJs/App.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import DataGrid, {
   Paging,
   HeaderFilter,
@@ -49,35 +49,43 @@ function calculateFilterExpression(filterValue, selectedFilterOperation, target)
   return (rowData) => (rowData.AssignedEmployee || []).indexOf(filterValue) !== -1;
 }
 const onRowInserted = (e) => e.component.navigateToRow(e.key);
-const statusEditorRender = (cell) => {
-  const onValueChanged = (e) => cell.setValue(e.value);
-  const itemRender = (data) => {
-    if (data) {
-      const imageSource = `images/icons/status-${data.id}.svg`;
-      return (
-        <div>
-          <img
-            src={imageSource}
-            className="status-icon middle"
-          ></img>
-          <span className="middle">{data.name}</span>
-        </div>
-      );
-    }
-    return <span>(All)</span>;
-  };
+const statusEditorRender = (cell) => <StatusEditor cell={cell} />;
+const statusItemRender = (data) => {
+  if (data) {
+    const imageSource = `images/icons/status-${data.id}.svg`;
+    return (
+      <div>
+        <img
+          src={imageSource}
+          className="status-icon middle"
+        ></img>
+        <span className="middle">{data.name}</span>
+      </div>
+    );
+  }
+  return <span>(All)</span>;
+};
+const StatusEditor = ({ cell }) => {
   const lookupDataSource = cell.column.lookup?.dataSource;
   const dataSource =
     typeof lookupDataSource === 'function'
       ? lookupDataSource({ data: cell.data, key: cell.row.key })
       : lookupDataSource;
+  const onValueChanged = useCallback(
+    (e) => {
+      cell.setValue(e.value);
+    },
+    [cell],
+  );
   return (
     <SelectBox
       defaultValue={cell.value}
       dataSource={dataSource}
+      displayExpr="name"
+      valueExpr="id"
       onValueChanged={onValueChanged}
       inputAttr={statusLabel}
-      itemRender={itemRender}
+      itemRender={statusItemRender}
     />
   );
 };
diff --git a/apps/demos/Demos/DataGrid/CustomEditors/ReactJs/EmployeeDropDownBoxComponent.js b/apps/demos/Demos/DataGrid/CustomEditors/ReactJs/EmployeeDropDownBoxComponent.js
index 48cca013ebad..ec6f824b6713 100644
--- a/apps/demos/Demos/DataGrid/CustomEditors/ReactJs/EmployeeDropDownBoxComponent.js
+++ b/apps/demos/Demos/DataGrid/CustomEditors/ReactJs/EmployeeDropDownBoxComponent.js
@@ -6,10 +6,11 @@ import DropDownBox from 'devextreme-react/drop-down-box';
 
 const dropDownOptions = { width: 500 };
 const ownerLabel = { 'aria-label': 'Owner' };
-const EmployeeDropDownBoxComponent = (props) => {
-  const {
-    data: { value: dataValue },
-  } = props;
+const clearContextMenu = (event) => {
+  event.items = [];
+};
+const EmployeeDropDownBoxComponent = ({ data }) => {
+  const { value: dataValue } = data;
   const initialSelectedRowKeys = dataValue !== null && dataValue !== undefined ? [dataValue] : [];
   const [selectedRowKeys, setSelectedRowKeys] = useState(initialSelectedRowKeys);
   const [isDropDownOpened, setDropDownOpened] = useState(false);
@@ -18,23 +19,23 @@ const EmployeeDropDownBoxComponent = (props) => {
       setDropDownOpened(e.value);
     }
   }, []);
-  const contentRender = useCallback(() => {
-    const onContextMenuPreparing = (event) => {
-      event.items = [];
-    };
-    const onSelectionChanged = (args) => {
+  const onSelectionChanged = useCallback(
+    (args) => {
       setSelectedRowKeys(args.selectedRowKeys);
       setDropDownOpened(false);
-      props.data.setValue(args.selectedRowKeys[0]);
-    };
-    return (
+      data.setValue(args.selectedRowKeys[0]);
+    },
+    [data],
+  );
+  const contentRender = useCallback(
+    () => (
       <DataGrid
-        dataSource={props.data.column.lookup.dataSource}
+        dataSource={data.column.lookup.dataSource}
         remoteOperations={true}
         height={250}
         selectedRowKeys={selectedRowKeys}
         hoverStateEnabled={true}
-        onContextMenuPreparing={onContextMenuPreparing}
+        onContextMenuPreparing={clearContextMenu}
         onSelectionChanged={onSelectionChanged}
         focusedRowEnabled={true}
         defaultFocusedRowKey={selectedRowKeys[0]}
@@ -49,14 +50,15 @@ const EmployeeDropDownBoxComponent = (props) => {
         <Scrolling mode="virtual" />
         <Selection mode="single" />
       </DataGrid>
-    );
-  }, [props.data, selectedRowKeys]);
+    ),
+    [data, onSelectionChanged, selectedRowKeys],
+  );
   return (
     <DropDownBox
       onOptionChanged={boxOptionChanged}
       opened={isDropDownOpened}
       dropDownOptions={dropDownOptions}
-      dataSource={props.data.column.lookup.dataSource}
+      dataSource={data.column.lookup.dataSource}
       value={selectedRowKeys[0]}
       displayExpr="FullName"
       valueExpr="ID"
diff --git a/apps/demos/Demos/DataGrid/CustomEditors/ReactJs/index.html b/apps/demos/Demos/DataGrid/CustomEditors/ReactJs/index.html
index b6ad2f9b1595..7b47950bbaff 100644
--- a/apps/demos/Demos/DataGrid/CustomEditors/ReactJs/index.html
+++ b/apps/demos/Demos/DataGrid/CustomEditors/ReactJs/index.html
@@ -12,7 +12,6 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
-    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/DataGrid/PDFCellCustomization/React/App.tsx b/apps/demos/Demos/DataGrid/PDFCellCustomization/React/App.tsx
index 42170e52ab9f..ca70c5c78223 100644
--- a/apps/demos/Demos/DataGrid/PDFCellCustomization/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/PDFCellCustomization/React/App.tsx
@@ -81,7 +81,7 @@ const App = () => (
       <Column dataField="City" />
       <Column dataField="State" groupIndex={0} />
       <Column dataField="Phone" format={phoneNumberFormat} />
-      <Column dataField="Website" alignment="center" width={100} cellRender={(e: DataGridTypes.ColumnCellTemplateData) => renderGridCell(e)} />
+      <Column dataField="Website" alignment="center" width={100} cellRender={renderGridCell} />
 
       <Summary>
         <TotalItem
diff --git a/apps/demos/Demos/DataGrid/PDFCellCustomization/ReactJs/App.js b/apps/demos/Demos/DataGrid/PDFCellCustomization/ReactJs/App.js
index 3294625943d4..0009d5aca4fb 100644
--- a/apps/demos/Demos/DataGrid/PDFCellCustomization/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/PDFCellCustomization/ReactJs/App.js
@@ -110,7 +110,7 @@ const App = () => (
         dataField="Website"
         alignment="center"
         width={100}
-        cellRender={(e) => renderGridCell(e)}
+        cellRender={renderGridCell}
       />
 
       <Summary>
diff --git a/apps/demos/Demos/DataGrid/RealTimeUpdates/React/App.tsx b/apps/demos/Demos/DataGrid/RealTimeUpdates/React/App.tsx
index 317753f7b7c6..62a3181dbf48 100644
--- a/apps/demos/Demos/DataGrid/RealTimeUpdates/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/RealTimeUpdates/React/App.tsx
@@ -1,4 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, {
+  memo, useCallback, useEffect, useState,
+} from 'react';
 import DataGrid, {
   Column, Summary, TotalItem, MasterDetail, Paging,
 } from 'devextreme-react/data-grid';
@@ -24,43 +26,35 @@ const getDetailGridDataSource = (product: Product) => ({
 
 const getAmount = (order: Order) => order.UnitPrice * order.Quantity;
 
-const detailRender = (detail: DataGridTypes.MasterDetailTemplateData) => (
-  <DataGrid
-    dataSource={getDetailGridDataSource(detail.data)}
-    repaintChangesOnly={true}
-    columnAutoWidth={true}
-    showBorders={true}>
-    <Paging defaultPageSize={5} />
-    <Column
-      dataField="OrderID"
-      dataType="number" />
-    <Column
-      dataField="ShipCity"
-      dataType="string" />
-    <Column
-      dataField="OrderDate"
-      dataType="datetime"
-      format="yyyy/MM/dd HH:mm:ss" />
-    <Column
-      dataField="UnitPrice"
-      dataType="number"
-      format="currency" />
-    <Column
-      dataField="Quantity"
-      dataType="number" />
-    <Column
-      caption="Amount"
-      dataType="number"
-      format="currency"
-      allowSorting={true}
-      calculateCellValue={getAmount} />
-    <Summary>
-      <TotalItem column="OrderID" summaryType="count" />
-      <TotalItem column="Quantity" summaryType="sum" displayFormat="{0}" />
-      <TotalItem column="Amount" summaryType="sum" displayFormat="{0}" valueFormat="currency" />
-    </Summary>
-  </DataGrid>
-);
+const DetailGrid: React.ComponentType<{ data: DataGridTypes.MasterDetailTemplateData }> = memo(({ data: detail }) => {
+  const detailDataSource = getDetailGridDataSource(detail.data);
+
+  return (
+    <DataGrid
+      dataSource={detailDataSource}
+      repaintChangesOnly={true}
+      columnAutoWidth={true}
+      showBorders={true}>
+      <Paging defaultPageSize={5} />
+      <Column dataField="OrderID" dataType="number" />
+      <Column dataField="ShipCity" dataType="string" />
+      <Column dataField="OrderDate" dataType="datetime" format="yyyy/MM/dd HH:mm:ss" />
+      <Column dataField="UnitPrice" dataType="number" format="currency" />
+      <Column dataField="Quantity" dataType="number" />
+      <Column
+        caption="Amount"
+        dataType="number"
+        format="currency"
+        allowSorting={true}
+        calculateCellValue={getAmount} />
+      <Summary>
+        <TotalItem column="OrderID" summaryType="count" />
+        <TotalItem column="Quantity" summaryType="sum" displayFormat="{0}" />
+        <TotalItem column="Amount" summaryType="sum" displayFormat="{0}" valueFormat="currency" />
+      </Summary>
+    </DataGrid>
+  );
+});
 
 const App = () => {
   const [updateFrequency, setUpdateFrequency] = useState(100);
@@ -79,9 +73,9 @@ const App = () => {
     return () => clearInterval(interval);
   }, [updateFrequency]);
 
-  const onUpdateFrequencyChanged = (e: SliderTypes.ValueChangedEvent) => {
+  const onUpdateFrequencyChanged = useCallback((e: SliderTypes.ValueChangedEvent) => {
     setUpdateFrequency(e.value);
-  };
+  }, []);
 
   return (
     <div>
@@ -115,7 +109,7 @@ const App = () => {
         </Summary>
         <MasterDetail
           enabled={true}
-          render={detailRender}>
+          component={DetailGrid}>
         </MasterDetail>
       </DataGrid>
       <div className="options">
diff --git a/apps/demos/Demos/DataGrid/RealTimeUpdates/ReactJs/App.js b/apps/demos/Demos/DataGrid/RealTimeUpdates/ReactJs/App.js
index 51e2adb1fefb..f69eb4a6cf0d 100644
--- a/apps/demos/Demos/DataGrid/RealTimeUpdates/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/RealTimeUpdates/ReactJs/App.js
@@ -1,4 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, {
+  memo, useCallback, useEffect, useState,
+} from 'react';
 import DataGrid, {
   Column,
   Summary,
@@ -22,62 +24,65 @@ const getDetailGridDataSource = (product) => ({
   filter: ['ProductID', '=', product.ProductID],
 });
 const getAmount = (order) => order.UnitPrice * order.Quantity;
-const detailRender = (detail) => (
-  <DataGrid
-    dataSource={getDetailGridDataSource(detail.data)}
-    repaintChangesOnly={true}
-    columnAutoWidth={true}
-    showBorders={true}
-  >
-    <Paging defaultPageSize={5} />
-    <Column
-      dataField="OrderID"
-      dataType="number"
-    />
-    <Column
-      dataField="ShipCity"
-      dataType="string"
-    />
-    <Column
-      dataField="OrderDate"
-      dataType="datetime"
-      format="yyyy/MM/dd HH:mm:ss"
-    />
-    <Column
-      dataField="UnitPrice"
-      dataType="number"
-      format="currency"
-    />
-    <Column
-      dataField="Quantity"
-      dataType="number"
-    />
-    <Column
-      caption="Amount"
-      dataType="number"
-      format="currency"
-      allowSorting={true}
-      calculateCellValue={getAmount}
-    />
-    <Summary>
-      <TotalItem
-        column="OrderID"
-        summaryType="count"
+const DetailGrid = memo(({ data: detail }) => {
+  const detailDataSource = getDetailGridDataSource(detail.data);
+  return (
+    <DataGrid
+      dataSource={detailDataSource}
+      repaintChangesOnly={true}
+      columnAutoWidth={true}
+      showBorders={true}
+    >
+      <Paging defaultPageSize={5} />
+      <Column
+        dataField="OrderID"
+        dataType="number"
+      />
+      <Column
+        dataField="ShipCity"
+        dataType="string"
+      />
+      <Column
+        dataField="OrderDate"
+        dataType="datetime"
+        format="yyyy/MM/dd HH:mm:ss"
       />
-      <TotalItem
-        column="Quantity"
-        summaryType="sum"
-        displayFormat="{0}"
+      <Column
+        dataField="UnitPrice"
+        dataType="number"
+        format="currency"
       />
-      <TotalItem
-        column="Amount"
-        summaryType="sum"
-        displayFormat="{0}"
-        valueFormat="currency"
+      <Column
+        dataField="Quantity"
+        dataType="number"
       />
-    </Summary>
-  </DataGrid>
-);
+      <Column
+        caption="Amount"
+        dataType="number"
+        format="currency"
+        allowSorting={true}
+        calculateCellValue={getAmount}
+      />
+      <Summary>
+        <TotalItem
+          column="OrderID"
+          summaryType="count"
+        />
+        <TotalItem
+          column="Quantity"
+          summaryType="sum"
+          displayFormat="{0}"
+        />
+        <TotalItem
+          column="Amount"
+          summaryType="sum"
+          displayFormat="{0}"
+          valueFormat="currency"
+        />
+      </Summary>
+    </DataGrid>
+  );
+});
 const App = () => {
   const [updateFrequency, setUpdateFrequency] = useState(100);
   useEffect(() => {
@@ -91,9 +96,9 @@ const App = () => {
     }, 50);
     return () => clearInterval(interval);
   }, [updateFrequency]);
-  const onUpdateFrequencyChanged = (e) => {
+  const onUpdateFrequencyChanged = useCallback((e) => {
     setUpdateFrequency(e.value);
-  };
+  }, []);
   return (
     <div>
       <DataGrid
@@ -144,7 +149,7 @@ const App = () => {
         </Summary>
         <MasterDetail
           enabled={true}
-          render={detailRender}
+          component={DetailGrid}
         ></MasterDetail>
       </DataGrid>
       <div className="options">
diff --git a/apps/demos/Demos/DataGrid/RealTimeUpdates/ReactJs/index.html b/apps/demos/Demos/DataGrid/RealTimeUpdates/ReactJs/index.html
index b6ad2f9b1595..7b47950bbaff 100644
--- a/apps/demos/Demos/DataGrid/RealTimeUpdates/ReactJs/index.html
+++ b/apps/demos/Demos/DataGrid/RealTimeUpdates/ReactJs/index.html
@@ -12,7 +12,6 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
-    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/DataGrid/RowEditing/React/App.tsx b/apps/demos/Demos/DataGrid/RowEditing/React/App.tsx
index 603cf85d7df9..d2356c6a003d 100644
--- a/apps/demos/Demos/DataGrid/RowEditing/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/RowEditing/React/App.tsx
@@ -16,6 +16,19 @@ const App = () => {
     setEvents([]);
   }, []);
 
+  const logEditingStart = useCallback(() => logEvent('EditingStart'), [logEvent]);
+  const logInitNewRow = useCallback(() => logEvent('InitNewRow'), [logEvent]);
+  const logRowInserting = useCallback(() => logEvent('RowInserting'), [logEvent]);
+  const logRowInserted = useCallback(() => logEvent('RowInserted'), [logEvent]);
+  const logRowUpdating = useCallback(() => logEvent('RowUpdating'), [logEvent]);
+  const logRowUpdated = useCallback(() => logEvent('RowUpdated'), [logEvent]);
+  const logRowRemoving = useCallback(() => logEvent('RowRemoving'), [logEvent]);
+  const logRowRemoved = useCallback(() => logEvent('RowRemoved'), [logEvent]);
+  const logSaving = useCallback(() => logEvent('Saving'), [logEvent]);
+  const logSaved = useCallback(() => logEvent('Saved'), [logEvent]);
+  const logEditCanceling = useCallback(() => logEvent('EditCanceling'), [logEvent]);
+  const logEditCanceled = useCallback(() => logEvent('EditCanceled'), [logEvent]);
+
   return (
     <>
       <DataGrid
@@ -24,18 +37,18 @@ const App = () => {
         keyExpr="ID"
         allowColumnReordering={true}
         showBorders={true}
-        onEditingStart={() => logEvent('EditingStart')}
-        onInitNewRow={() => logEvent('InitNewRow')}
-        onRowInserting={() => logEvent('RowInserting')}
-        onRowInserted={() => logEvent('RowInserted')}
-        onRowUpdating={() => logEvent('RowUpdating')}
-        onRowUpdated={() => logEvent('RowUpdated')}
-        onRowRemoving={() => logEvent('RowRemoving')}
-        onRowRemoved={() => logEvent('RowRemoved')}
-        onSaving={() => logEvent('Saving')}
-        onSaved={() => logEvent('Saved')}
-        onEditCanceling={() => logEvent('EditCanceling')}
-        onEditCanceled={() => logEvent('EditCanceled')}>
+        onEditingStart={logEditingStart}
+        onInitNewRow={logInitNewRow}
+        onRowInserting={logRowInserting}
+        onRowInserted={logRowInserted}
+        onRowUpdating={logRowUpdating}
+        onRowUpdated={logRowUpdated}
+        onRowRemoving={logRowRemoving}
+        onRowRemoved={logRowRemoved}
+        onSaving={logSaving}
+        onSaved={logSaved}
+        onEditCanceling={logEditCanceling}
+        onEditCanceled={logEditCanceled}>
 
         <Paging enabled={true} />
         <Editing
diff --git a/apps/demos/Demos/DataGrid/RowEditing/ReactJs/App.js b/apps/demos/Demos/DataGrid/RowEditing/ReactJs/App.js
index 2865fa8b3af1..824f15317820 100644
--- a/apps/demos/Demos/DataGrid/RowEditing/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/RowEditing/ReactJs/App.js
@@ -13,6 +13,18 @@ const App = () => {
   const clearEvents = useCallback(() => {
     setEvents([]);
   }, []);
+  const logEditingStart = useCallback(() => logEvent('EditingStart'), [logEvent]);
+  const logInitNewRow = useCallback(() => logEvent('InitNewRow'), [logEvent]);
+  const logRowInserting = useCallback(() => logEvent('RowInserting'), [logEvent]);
+  const logRowInserted = useCallback(() => logEvent('RowInserted'), [logEvent]);
+  const logRowUpdating = useCallback(() => logEvent('RowUpdating'), [logEvent]);
+  const logRowUpdated = useCallback(() => logEvent('RowUpdated'), [logEvent]);
+  const logRowRemoving = useCallback(() => logEvent('RowRemoving'), [logEvent]);
+  const logRowRemoved = useCallback(() => logEvent('RowRemoved'), [logEvent]);
+  const logSaving = useCallback(() => logEvent('Saving'), [logEvent]);
+  const logSaved = useCallback(() => logEvent('Saved'), [logEvent]);
+  const logEditCanceling = useCallback(() => logEvent('EditCanceling'), [logEvent]);
+  const logEditCanceled = useCallback(() => logEvent('EditCanceled'), [logEvent]);
   return (
     <>
       <DataGrid
@@ -21,18 +33,18 @@ const App = () => {
         keyExpr="ID"
         allowColumnReordering={true}
         showBorders={true}
-        onEditingStart={() => logEvent('EditingStart')}
-        onInitNewRow={() => logEvent('InitNewRow')}
-        onRowInserting={() => logEvent('RowInserting')}
-        onRowInserted={() => logEvent('RowInserted')}
-        onRowUpdating={() => logEvent('RowUpdating')}
-        onRowUpdated={() => logEvent('RowUpdated')}
-        onRowRemoving={() => logEvent('RowRemoving')}
-        onRowRemoved={() => logEvent('RowRemoved')}
-        onSaving={() => logEvent('Saving')}
-        onSaved={() => logEvent('Saved')}
-        onEditCanceling={() => logEvent('EditCanceling')}
-        onEditCanceled={() => logEvent('EditCanceled')}
+        onEditingStart={logEditingStart}
+        onInitNewRow={logInitNewRow}
+        onRowInserting={logRowInserting}
+        onRowInserted={logRowInserted}
+        onRowUpdating={logRowUpdating}
+        onRowUpdated={logRowUpdated}
+        onRowRemoving={logRowRemoving}
+        onRowRemoved={logRowRemoved}
+        onSaving={logSaving}
+        onSaved={logSaved}
+        onEditCanceling={logEditCanceling}
+        onEditCanceled={logEditCanceled}
       >
         <Paging enabled={true} />
         <Editing
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/React/App.tsx b/apps/demos/Demos/DataGrid/SemanticSearch/React/App.tsx
index 21ab47f66901..0d4c1c280de6 100644
--- a/apps/demos/Demos/DataGrid/SemanticSearch/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/React/App.tsx
@@ -6,6 +6,8 @@ import { createStore } from 'devextreme-aspnet-data-nojquery';
 
 const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridSemanticSearch';
 const numberBoxAttr = { 'aria-label': 'Similarity Factor' };
+const toolbarStyle = { display: 'flex', alignItems: 'center' };
+const similarityFactorLabelStyle = { marginRight: '8px' };
 
 const App = () => {
   const searchValueRef = useRef<string>('');
@@ -58,8 +60,8 @@ const App = () => {
       <SearchPanel visible={true} />
       <Toolbar>
         <Item location="before">
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <span style={{ marginRight: '8px' }}>Similarity Factor:</span>
+          <div style={toolbarStyle}>
+            <span style={similarityFactorLabelStyle}>Similarity Factor:</span>
             <NumberBox
               defaultValue={similarityFactorRef.current}
               min={0}
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/App.js b/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/App.js
index 80e0bc6e4f21..ddc3e8004805 100644
--- a/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/App.js
@@ -12,6 +12,8 @@ import { createStore } from 'devextreme-aspnet-data-nojquery';
 
 const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridSemanticSearch';
 const numberBoxAttr = { 'aria-label': 'Similarity Factor' };
+const toolbarStyle = { display: 'flex', alignItems: 'center' };
+const similarityFactorLabelStyle = { marginRight: '8px' };
 const App = () => {
   const searchValueRef = useRef('');
   const similarityFactorRef = useRef(0.31);
@@ -66,8 +68,8 @@ const App = () => {
       <SearchPanel visible={true} />
       <Toolbar>
         <Item location="before">
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <span style={{ marginRight: '8px' }}>Similarity Factor:</span>
+          <div style={toolbarStyle}>
+            <span style={similarityFactorLabelStyle}>Similarity Factor:</span>
             <NumberBox
               defaultValue={similarityFactorRef.current}
               min={0}