From 8759ee3d89c980791ae8d457291a5d1a656549bd Mon Sep 17 00:00:00 2001
From: dxArtemiusz <artem.kazakov@devexpress.com>
Date: Wed, 4 Sep 2024 02:24:24 +0400
Subject: [PATCH] Option changes

Used useMemo instead of useCallback
---
 apps/demos/Demos/Popup/Overview/React/App.tsx  | 14 +++++++-------
 apps/demos/Demos/Popup/Overview/ReactJs/App.js | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/demos/Demos/Popup/Overview/React/App.tsx b/apps/demos/Demos/Popup/Overview/React/App.tsx
index a87dd06b29e9..60dd710265f9 100644
--- a/apps/demos/Demos/Popup/Overview/React/App.tsx
+++ b/apps/demos/Demos/Popup/Overview/React/App.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Popup, Position, ToolbarItem } from 'devextreme-react/popup';
 import notify from 'devextreme/ui/notify';
 import { EmployeeItem, EmployeeItemProps } from './EmployeeItem.tsx';
@@ -51,19 +51,19 @@ export default function App() {
     );
   }, [currentEmployee]);
 
-  const getInfoButtonOptions = useCallback(() => ({
+  const getInfoButtonOptions = useMemo(() => ({
     text: 'More info',
     onClick: showMoreInfo,
   }), [showMoreInfo]);
 
-  const getEmailButtonOptions = useCallback(() => ({
+  const getEmailButtonOptions = useMemo(() => ({
     icon: 'email',
     stylingMode: 'contained',
     text: 'Send',
     onClick: sendEmail,
   }), [sendEmail]);
 
-  const getCloseButtonOptions = useCallback(() => ({
+  const getCloseButtonOptions = useMemo(() => ({
     text: 'Close',
     stylingMode: 'outlined',
     type: 'normal',
@@ -97,19 +97,19 @@ export default function App() {
           widget="dxButton"
           toolbar="top"
           locateInMenu="always"
-          options={getInfoButtonOptions()}
+          options={getInfoButtonOptions}
         />
         <ToolbarItem
           widget="dxButton"
           toolbar="bottom"
           location="before"
-          options={getEmailButtonOptions()}
+          options={getEmailButtonOptions}
         />
         <ToolbarItem
           widget="dxButton"
           toolbar="bottom"
           location="after"
-          options={getCloseButtonOptions()}
+          options={getCloseButtonOptions}
         />
         <p>
           Full Name:&nbsp;
diff --git a/apps/demos/Demos/Popup/Overview/ReactJs/App.js b/apps/demos/Demos/Popup/Overview/ReactJs/App.js
index f8e21bafcdd7..9cff77e2b31c 100644
--- a/apps/demos/Demos/Popup/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/Popup/Overview/ReactJs/App.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Popup, Position, ToolbarItem } from 'devextreme-react/popup';
 import notify from 'devextreme/ui/notify';
 import { EmployeeItem } from './EmployeeItem.js';
@@ -49,14 +49,14 @@ export default function App() {
       3000,
     );
   }, [currentEmployee]);
-  const getInfoButtonOptions = useCallback(
+  const getInfoButtonOptions = useMemo(
     () => ({
       text: 'More info',
       onClick: showMoreInfo,
     }),
     [showMoreInfo],
   );
-  const getEmailButtonOptions = useCallback(
+  const getEmailButtonOptions = useMemo(
     () => ({
       icon: 'email',
       stylingMode: 'contained',
@@ -65,7 +65,7 @@ export default function App() {
     }),
     [sendEmail],
   );
-  const getCloseButtonOptions = useCallback(
+  const getCloseButtonOptions = useMemo(
     () => ({
       text: 'Close',
       stylingMode: 'outlined',
@@ -112,19 +112,19 @@ export default function App() {
           widget="dxButton"
           toolbar="top"
           locateInMenu="always"
-          options={getInfoButtonOptions()}
+          options={getInfoButtonOptions}
         />
         <ToolbarItem
           widget="dxButton"
           toolbar="bottom"
           location="before"
-          options={getEmailButtonOptions()}
+          options={getEmailButtonOptions}
         />
         <ToolbarItem
           widget="dxButton"
           toolbar="bottom"
           location="after"
-          options={getCloseButtonOptions()}
+          options={getCloseButtonOptions}
         />
         <p>
           Full Name:&nbsp;