feat: improve react/python performance

packages/app/package.json

@@ -14,7 +14,9 @@
     "@babel/runtime": "^7.24.0",
     "antd": "^5.15.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "scheduler": "^0.23.2",
+    "use-context-selector": "^2.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
@@ -28,4 +30,4 @@
     "typescript": "^5.0.2",
     "vite": "^4.5.2"
   }
-}
+}

packages/app/src/App.tsx

@@ -1,30 +1,28 @@
 import React, { useEffect } from 'react';
 import { Layout, notification } from 'antd';
-import AppSider from './components/AppSider/AppSider'
-import './App.css'
+import AppSider from './components/AppSider/AppSider';
+import './App.css';
 import { useAppContext } from './context/AppContext';
-const { Content } = Layout;
-import LogsContainer from './components/LogsContainer/LogsContainer'
-import StatsContainer from './components/StatsContainer/StatsContainer'
-import Header from './components/Header/Header'
+import LogsContainer from './components/LogsContainer/LogsContainer';
+import StatsContainer from './components/StatsContainer/StatsContainer';
+import Header from './components/Header/Header';
 
+const { Content } = Layout;
 
 const App: React.FC = () => {
   const [api, contextHolder] = notification.useNotification();
-  const {
-    setAppVersion,
-    setFastMode,
-    setCurrentScreen,
-    setDevMode
-  } = useAppContext()
+  const setAppVersion = useAppContext((state) => state.setAppVersion);
+  const setCurrentScreen = useAppContext((state) => state.setCurrentScreen);
+  const setDevMode = useAppContext((state) => state.setDevMode);
+  const setFastMode = useAppContext((state) => state.setFastMode);
 
   useEffect(() => {
     const handleKeyDownDevMode = (e: KeyboardEvent) => {
       if (e.key === "F1") {
         e.preventDefault();
         setDevMode((val) => !val);
-        setCurrentScreen(false)
-        setFastMode(false)
+        setCurrentScreen(false);
+        setFastMode(false);
       }
     };
 
@@ -38,10 +36,10 @@ const App: React.FC = () => {
   }, []);
 
   async function getVersionAndCheckForUpdate() {
-    const res = await window.pywebview.api.get_version()
+    const res = await window.pywebview.api.get_version();
     if (res) {
-      setAppVersion(res.current_app_version)
-      if (res.current_app_version != res.latest_app_version) {
+      setAppVersion(res.current_app_version);
+      if (res.current_app_version !== res.latest_app_version) {
         api.warning({
           message: `Update Available`,
           description: <a href='https://github.com/brunocordioli072/epic7_bot/releases/latest' target='_blank'>Update {res.latest_app_version} available!</a>,
@@ -56,13 +54,11 @@ const App: React.FC = () => {
       {contextHolder}
       <AppSider />
       <Layout>
-        {/* <Header style={{ padding: 0, background: colorBgContainer }} /> */}
         <Content className='content'>
           <Header />
           <StatsContainer />
           <LogsContainer />
         </Content>
-        {/* <Footer style={{ textAlign: 'center' }}>Ant Design ©2023 Created by Ant UED</Footer> */}
       </Layout>
     </Layout>
   );

packages/app/src/components/AppSider/AppSider.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
 import { Layout, Menu } from 'antd';
 import type { MenuProps } from 'antd';
-import './AppSider.css'
-import { useAppContext } from '../../context/AppContext';
+import './AppSider.css';
+import { AppContext } from '../../context/AppContext';
+import { useContextSelector } from 'use-context-selector';
 
 const { Sider } = Layout;
 
@@ -26,35 +27,39 @@ function getItem({ label, key, icon, children, disabled }: {
 
 const AppSider: React.FC = () => {
     const [collapsed, setCollapsed] = useState(false);
-    const {
-        setCommand,
-        commands, setLogs,
-        setSummary, appVersion,
-        setFastMode,
-        setCurrentScreen
-    } = useAppContext()
+    const setCommand = useContextSelector(AppContext, (state) => state.setCommand);
+    const commands = useContextSelector(AppContext, (state) => state.commands);
+    const setLogs = useContextSelector(AppContext, (state) => state.setLogs);
+    const setSummary = useContextSelector(AppContext, (state) => state.setSummary);
+    const appVersion = useContextSelector(AppContext, (state) => state.appVersion);
+    const setFastMode = useContextSelector(AppContext, (state) => state.setFastMode);
+    const setCurrentScreen = useContextSelector(AppContext, (state) => state.setCurrentScreen);
 
     function handleSelect(key: string) {
-        setCommand(commands.find(el => el.label === key) as any)
-        setLogs([])
-        setSummary(null as any)
-        setFastMode(false)
-        setCurrentScreen(false)
+        setCommand(commands.find(el => el.label === key) as any);
+        setLogs([]);
+        setSummary(null as any);
+        setFastMode(false);
+        setCurrentScreen(false);
     }
 
     return (
-        <Sider collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} >
-            <Menu theme="dark" onSelect={(e) => handleSelect(e.key)} defaultSelectedKeys={['shop']} mode="inline" items={commands.map(el => {
-                return getItem({
+        <Sider collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
+            <Menu
+                theme="dark"
+                onSelect={(e) => handleSelect(e.key)}
+                defaultSelectedKeys={['shop']}
+                mode="inline"
+                items={commands.map(el => getItem({
                     label: el.label,
                     key: el.label,
                     icon: el.icon,
                     disabled: el.disabled
-                })
-            })} />
+                }))}
+            />
             <div className='version'>Version: {appVersion}</div>
         </Sider>
-    )
-}
+    );
+};
 
 export default AppSider

packages/app/src/components/Header/Header.tsx

@@ -1,20 +1,20 @@
 import { Breadcrumb, Button, Checkbox, Popconfirm } from "antd"
-import { useAppContext } from "../../context/AppContext";
+import { AppContext } from "../../context/AppContext";
 import { useState } from "react";
+import { useContextSelector } from "use-context-selector";
 
 const Header: React.FC = () => {
     const [logsInterval, setLogsInterval] = useState(0)
-    const {
-        command,
-        logs,
-        setLogs,
-        setSummary,
-        fastMode,
-        setFastMode,
-        currentScreen,
-        setCurrentScreen,
-        devMode,
-    } = useAppContext()
+    const command = useContextSelector(AppContext, (state) => state.command);
+    const logs = useContextSelector(AppContext, (state) => state.logs);
+    const setLogs = useContextSelector(AppContext, (state) => state.setLogs);
+    const setSummary = useContextSelector(AppContext, (state) => state.setSummary);
+    const fastMode = useContextSelector(AppContext, (state) => state.fastMode);
+    const setFastMode = useContextSelector(AppContext, (state) => state.setFastMode);
+    const currentScreen = useContextSelector(AppContext, (state) => state.currentScreen);
+    const setCurrentScreen = useContextSelector(AppContext, (state) => state.setCurrentScreen);
+    const devMode = useContextSelector(AppContext, (state) => state.devMode);
+
 
 
     async function handleStop() {

packages/app/src/components/LogsContainer/LogsContainer.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
-import { useAppContext } from "../../context/AppContext";
+import { AppContext } from "../../context/AppContext";
 import './LogsContainer.css'
+import { useContextSelector } from "use-context-selector";
 
 const AlwaysScrollToBottom = () => {
     const elementRef = useRef<HTMLDivElement>(null);
@@ -13,9 +14,7 @@ const AlwaysScrollToBottom = () => {
 
 
 const Logs: React.FC = () => {
-    const {
-        logs,
-    } = useAppContext()
+    const logs = useContextSelector(AppContext, (state) => state.logs);
 
     return (
         <div className='logs'>

packages/app/src/components/StatsContainer/StatsContainer.tsx

@@ -1,10 +1,9 @@
-import { useAppContext } from "../../context/AppContext";
+import { useContextSelector } from "use-context-selector";
+import { AppContext } from "../../context/AppContext";
 import './StatsContainer.css'
 
 const StatsContainer: React.FC = () => {
-    const {
-        summary,
-    } = useAppContext()
+    const summary = useContextSelector(AppContext, (state) => state.summary);
 
     return (
         <div className='stats'>

packages/app/src/context/AppContext.tsx

@@ -1,10 +1,11 @@
-import React, { useContext, useState } from "react";
+import React, { useState } from "react";
 import {
     ShoppingOutlined,
     RocketOutlined,
     BorderlessTableOutlined,
     RetweetOutlined,
 } from '@ant-design/icons';
+import { createContext, useContextSelector } from 'use-context-selector';
 
 interface Command {
     id: string
@@ -35,7 +36,7 @@ interface AppContextInterface {
     setDevMode: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-export const AppContext = React.createContext<AppContextInterface>({
+export const AppContext = createContext<AppContextInterface>({
     commands: [],
     setCommands: () => { },
     command: {} as any,
@@ -122,4 +123,5 @@ export const AppProvider = ({ children }: { children: any }) => {
     )
 }
 
-export const useAppContext = () => useContext(AppContext);
+export const useAppContext = <T,>(selector: (state: AppContextInterface) => T): T =>
+    useContextSelector(AppContext, selector);