useCallback & useMemo

Author: lu0713

app/charts/RouteChart.jsx

@@ -6,7 +6,7 @@ import { CommsContext } from '../context/CommsContext';
 // import { log } from 'console';
 import Graph from 'react-graph-vis';
 
-const RouteLocations = React.memo((props) => {
+const RouteLocations = React.memo(() => {
   const communicationsData = useContext(CommsContext).commsData;
   console.log('commdata=======>', communicationsData);
   console.log('try again');

app/context/ApplicationContext.tsx

@@ -12,7 +12,7 @@ const { ipcRenderer } = window.require('electron');
  */
 export const ApplicationContext = React.createContext<any>(null);
 
-const ApplicationContextProvider: React.FC = ({ children }) => {
+const ApplicationContextProvider: React.FC = React.memo(({ children }) => {
   const [servicesData, setServicesData] = useState([]);
   const [app, setApp] = useState<string>('');
 
@@ -79,6 +79,6 @@ const ApplicationContextProvider: React.FC = ({ children }) => {
       {children}
     </ApplicationContext.Provider>
   );
-};
+});
 
 export default ApplicationContextProvider;

app/context/CommsContext.tsx

@@ -11,7 +11,7 @@ export const CommsContext = React.createContext<any>(null);
  * @method    setCommsData
  * @method    fetchCommsData
  */
-const CommsContextProvider: React.SFC = ({ children }) => {
+const CommsContextProvider: React.SFC = React.memo(({ children }) => {
   const [commsData, setCommsData] = useState([]);
   const [currentApp, setCurrentApp] = useState('');
 
@@ -58,6 +58,6 @@ const CommsContextProvider: React.SFC = ({ children }) => {
       {children}
     </CommsContext.Provider>
   );
-};
+});
 
 export default CommsContextProvider;

app/context/DashboardContext.tsx

@@ -22,7 +22,7 @@ export const DashboardContext = createContext<any>(null);
  * @method    addApp
  * @method    deleteApp
  */
-const DashboardContextProvider = ({ children }: Props) => {
+const DashboardContextProvider = React.memo(({ children }: Props) => {
   const [applications, setApplications] = useState<string[]>([]);
 
   /**
@@ -63,6 +63,6 @@ const DashboardContextProvider = ({ children }: Props) => {
       {children}
     </DashboardContext.Provider>
   );
-};
+});
 
 export default DashboardContextProvider;

app/context/DockerContext.tsx

@@ -13,7 +13,7 @@ export const DockerContext = React.createContext<any>(null);
  * @method    setDockerData
  * @method    fetchDockerData
  */
-const DockerContextProvider: React.SFC = ({ children }) => {
+const DockerContextProvider: React.FC = React.memo(({ children }) => {
   const [dockerData, setDockerData] = useState({});
 
   function tryParseJSON(jsonString: any) {
@@ -55,6 +55,6 @@ const DockerContextProvider: React.SFC = ({ children }) => {
       {children}
     </DockerContext.Provider>
   );
-};
+});
 
 export default DockerContextProvider;

app/context/HealthContext.tsx

@@ -10,7 +10,7 @@ export const HealthContext = React.createContext<any>(null);
  * @method    parseHealthData
  * @method    setHealthData
  */
-const HealthContextProvider: React.SFC = ({ children }) => {
+const HealthContextProvider: React.FC = React.memo(({ children }) => {
   const [healthData, setHealthData] = useState({});
 
   function tryParseJSON(jsonString:any) {
@@ -65,6 +65,6 @@ const HealthContextProvider: React.SFC = ({ children }) => {
       {children}
     </HealthContext.Provider>
   );
-};
+});
 
 export default HealthContextProvider;

app/modals/AddModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useCallback } from 'react';
 import { DashboardContext } from '../context/DashboardContext';
 import '../stylesheets/AddModal.scss';
 
@@ -31,20 +31,20 @@ const AddModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
   });
 
   // Submit form data and save to database
-  const handleSubmit = (event: FormElement) => {
+  const handleSubmit = useCallback((event: FormElement) => {
     event.preventDefault();
     addApp(fields);
     setOpen(false); // Close modal on submit
-  };
+  }, []);
 
   // Handle form changes
-  const handleChange = (event: InputElement) => {
+  const handleChange = useCallback((event: InputElement) => {
     const { name, value } = event.target;
     setFields({
       ...fields,
       [name]: value,
     });
-  };
+  }, []);
 
   const { database, URI, name, description } = fields;