Improve performance with useMemo

packages/vscode-extension/src/webview/providers/AlertProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useEffect, useState } from "react";
+import React, { createContext, useCallback, useEffect, useMemo, useState } from "react";
 import Alert from "../components/shared/Alert";
 
 interface AlertType {
@@ -46,8 +46,12 @@ export default function AlertProvider({ children }: { children: React.ReactNode
 
   const topAlert = getTopAlert(alerts);
 
+  const contextValue = useMemo(() => {
+    return { openAlert, isOpen, closeAlert };
+  }, [openAlert, isOpen, closeAlert]);
+
   return (
-    <AlertContext.Provider value={{ openAlert, isOpen, closeAlert }}>
+    <AlertContext.Provider value={contextValue}>
       {children}
       <Alert
         open={Boolean(topAlert?.id)}

packages/vscode-extension/src/webview/providers/DependenciesProvider.tsx

@@ -4,6 +4,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useState,
 } from "react";
 import { makeProxy } from "../utilities/rpc";
@@ -74,15 +75,16 @@ export default function DependenciesProvider({ children }: PropsWithChildren) {
     };
   }, []);
 
+  const contextValue = useMemo(() => {
+    return {
+      dependencies: depsState,
+      runDiagnostics,
+      errors: getErrors(depsState),
+    };
+  }, [depsState, runDiagnostics, getErrors]);
+
   return (
-    <DependenciesContext.Provider
-      value={{
-        dependencies: depsState,
-        runDiagnostics,
-        errors: getErrors(depsState),
-      }}>
-      {children}
-    </DependenciesContext.Provider>
+    <DependenciesContext.Provider value={contextValue}>{children}</DependenciesContext.Provider>
   );
 }
 

packages/vscode-extension/src/webview/providers/DevicesProvider.tsx

@@ -5,6 +5,7 @@ import {
   useState,
   useEffect,
   useCallback,
+  useMemo,
 } from "react";
 import { makeProxy } from "../utilities/rpc";
 import {
@@ -64,19 +65,18 @@ export default function DevicesProvider({ children }: PropsWithChildren) {
     };
   }, []);
 
-  return (
-    <DevicesContext.Provider
-      value={{
-        devices,
-        finishedInitialLoad,
-        androidImages,
-        iOSRuntimes,
-        reload,
-        deviceManager: DeviceManager,
-      }}>
-      {children}
-    </DevicesContext.Provider>
-  );
+  const contextValue = useMemo(() => {
+    return {
+      devices,
+      finishedInitialLoad,
+      androidImages,
+      iOSRuntimes,
+      reload,
+      deviceManager: DeviceManager,
+    };
+  }, [devices, finishedInitialLoad, androidImages, iOSRuntimes, reload, DeviceManager]);
+
+  return <DevicesContext.Provider value={contextValue}>{children}</DevicesContext.Provider>;
 }
 
 export function useDevices() {

packages/vscode-extension/src/webview/providers/LaunchConfigProvider.tsx

@@ -5,6 +5,7 @@ import {
   useState,
   useEffect,
   useCallback,
+  useMemo,
 } from "react";
 import { makeProxy } from "../utilities/rpc";
 import {
@@ -57,10 +58,12 @@ export default function LaunchConfigProvider({ children }: PropsWithChildren) {
     [config, setConfig]
   );
 
+  const contextValue = useMemo(() => {
+    return { ...config, update, xcodeSchemes };
+  }, [config, update, xcodeSchemes]);
+
   return (
-    <LaunchConfigContext.Provider value={{ ...config, update, xcodeSchemes }}>
-      {children}
-    </LaunchConfigContext.Provider>
+    <LaunchConfigContext.Provider value={contextValue}>{children}</LaunchConfigContext.Provider>
   );
 }
 

packages/vscode-extension/src/webview/providers/ProjectProvider.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useContext, createContext, useState, useEffect } from "react";
+import { PropsWithChildren, useContext, createContext, useState, useEffect, useMemo } from "react";
 import { makeProxy } from "../utilities/rpc";
 import { DeviceSettings, ProjectInterface, ProjectState } from "../../common/Project";
 
@@ -61,11 +61,11 @@ export default function ProjectProvider({ children }: PropsWithChildren) {
     };
   }, []);
 
-  return (
-    <ProjectContext.Provider value={{ projectState, deviceSettings, project, hasActiveLicense }}>
-      {children}
-    </ProjectContext.Provider>
-  );
+  const contextValue = useMemo(() => {
+    return { projectState, deviceSettings, project, hasActiveLicense };
+  }, [projectState, deviceSettings, project, hasActiveLicense]);
+
+  return <ProjectContext.Provider value={contextValue}>{children}</ProjectContext.Provider>;
 }
 
 export function useProject() {

packages/vscode-extension/src/webview/providers/WorkspaceConfigProvider.tsx

@@ -5,6 +5,7 @@ import {
   useState,
   useEffect,
   useCallback,
+  useMemo,
 } from "react";
 import { makeProxy } from "../utilities/rpc";
 import { WorkspaceConfig, WorkspaceConfigProps } from "../../common/WorkspaceConfig";
@@ -49,8 +50,12 @@ export default function WorkspaceConfigProvider({ children }: PropsWithChildren)
     [config, setConfig]
   );
 
+  const contextValue = useMemo(() => {
+    return { ...config, update };
+  }, [config, update]);
+
   return (
-    <WorkspaceConfigContext.Provider value={{ ...config, update }}>
+    <WorkspaceConfigContext.Provider value={contextValue}>
       {children}
     </WorkspaceConfigContext.Provider>
   );