perf: new simvar hooks (#7180)

flybywiresim · May 11, 2022 · c2fb3f4 · c2fb3f4
1 parent 390f1e9
commit c2fb3f4
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 50 deletions.
diff --git a/src/instruments/src/Common/simVars.tsx b/src/instruments/src/Common/simVars.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useInteractionEvents, useUpdate } from './hooks';
 
 /**
@@ -292,8 +292,29 @@ export const useSimVar = (
     maxStaleness = 0,
 ): [SimVarValue, (newValueOrSetter: SimVarValue | SimVarSetter
 ) => void] => {
-    const value = useSimVarValue(name, unit, maxStaleness);
-    const setter = useSimVarSetter(name, unit);
+    const lastUpdate = useRef(Date.now() - maxStaleness - 1);
+
+    const [value, setValue] = useState(() => SimVar.GetSimVarValue(name, unit));
+
+    const updateCallback = useCallback(() => {
+        const newValue = SimVar.GetSimVarValue(name, unit);
+
+        const delta = Date.now() - lastUpdate.current;
+
+        if (delta > maxStaleness) {
+            lastUpdate.current = Date.now();
+            setValue(newValue);
+        }
+    }, [name, unit, maxStaleness]);
+
+    useUpdate(updateCallback);
+
+    const setter = useCallback((value: any | SimVarSetter) => {
+        SimVar.SetSimVarValue(name, unit, typeof value === 'function' ? value(SimVar.GetSimVarValue(name, unit)) : value);
+
+        return value;
+    }, [name, unit]);
+
     return [value, setter];
 };
 
@@ -323,27 +344,24 @@ export const useGlobalVar = (
     unit: UnitName,
     maxStaleness = 0,
 ): SimVarValue => {
-    const contextValue = useContext(context);
+    const lastUpdate = useRef(Date.now() - maxStaleness - 1);
 
-    useEffect(() => {
-        // This part of useEffect will be called whenever either:
-        // - the component has just mounted, or
-        // - one the parameters below (name, unit, maxStaleness) has changed.
-        // In these cases, we want to register our current parameters with the
-        // SimVarProvider that we access through the context.
-        contextValue.register(name, unit, maxStaleness, 1);
-        return () => {
-            // This part of useEffect will be called whenever either:
-            // - one of the parameters below (name, unit, maxStaleness) is about
-            //   to change, or
-            // - the component is about to unmount
-            // In these cases, we want to unregister our current parameters from
-            // the SimVar provider, that we again access through the context.
-            contextValue.unregister(name, unit, maxStaleness, 1);
-        };
+    const [value, setValue] = useState(() => SimVar.GetGlobalVarValue(name, unit));
+
+    const updateCallback = useCallback(() => {
+        const newValue = SimVar.GetGlobalVarValue(name, unit);
+
+        const delta = Date.now() - lastUpdate.current;
+
+        if (delta > maxStaleness) {
+            lastUpdate.current = Date.now();
+            setValue(newValue);
+        }
     }, [name, unit, maxStaleness]);
 
-    return contextValue.retrieve(name, unit, false, 1);
+    useUpdate(updateCallback);
+
+    return value;
 };
 
 /**
@@ -372,27 +390,24 @@ export const useGameVar = (
     unit: UnitName,
     maxStaleness = 0,
 ): SimVarValue => {
-    const contextValue = useContext(context);
+    const lastUpdate = useRef(Date.now() - maxStaleness - 1);
 
-    useEffect(() => {
-        // This part of useEffect will be called whenever either:
-        // - the component has just mounted, or
-        // - one the parameters below (name, unit, maxStaleness) has changed.
-        // In these cases, we want to register our current parameters with the
-        // SimVarProvider that we access through the context.
-        contextValue.register(name, unit, maxStaleness, 2);
-        return () => {
-            // This part of useEffect will be called whenever either:
-            // - one of the parameters below (name, unit, maxStaleness) is about
-            //   to change, or
-            // - the component is about to unmount
-            // In these cases, we want to unregister our current parameters from
-            // the SimVar provider, that we again access through the context.
-            contextValue.unregister(name, unit, maxStaleness, 2);
-        };
+    const [value, setValue] = useState(() => SimVar.GetGameVarValue(name, unit));
+
+    const updateCallback = useCallback(() => {
+        const newValue = SimVar.GetGameVarValue(name, unit);
+
+        const delta = Date.now() - lastUpdate.current;
+
+        if (delta > maxStaleness) {
+            lastUpdate.current = Date.now();
+            setValue(newValue);
+        }
     }, [name, unit, maxStaleness]);
 
-    return contextValue.retrieve(name, unit, false, 2);
+    useUpdate(updateCallback);
+
+    return value;
 };
 
 /**
@@ -478,8 +493,9 @@ export const useSplitSimVar = (
     maxStaleness = 0,
 ): [SimVarValue, (newValueOrSetter: SimVarValue | SimVarSetter
 ) => void] => {
-    const value = useSimVarValue(readName, readUnit, maxStaleness);
-    const setter = useSimVarSetter(readName, writeUnit || readUnit, writeName);
+    const [value] = useSimVar(readName, readUnit, maxStaleness);
+    const [, setter] = useSimVar(writeName, writeUnit || readUnit);
+
     return [value, setter];
 };
 

diff --git a/src/instruments/src/EFB/StatusBar/StatusBar.tsx b/src/instruments/src/EFB/StatusBar/StatusBar.tsx
@@ -19,11 +19,11 @@ interface StatusBarProps {
 }
 
 export const StatusBar = ({ batteryLevel, isCharging }: StatusBarProps) => {
-    const [currentUTC] = useSimVar('E:ZULU TIME', 'seconds');
-    const [currentLocalTime] = useSimVar('E:LOCAL TIME', 'seconds');
-    const [dayOfWeek] = useSimVar('E:ZULU DAY OF WEEK', 'number');
-    const [monthOfYear] = useSimVar('E:ZULU MONTH OF YEAR', 'number');
-    const [dayOfMonth] = useSimVar('E:ZULU DAY OF MONTH', 'number');
+    const [currentUTC] = useSimVar('E:ZULU TIME', 'seconds', 1_000);
+    const [currentLocalTime] = useSimVar('E:LOCAL TIME', 'seconds', 1_000);
+    const [dayOfWeek] = useSimVar('E:ZULU DAY OF WEEK', 'number', 1_000);
+    const [monthOfYear] = useSimVar('E:ZULU MONTH OF YEAR', 'number', 1_000);
+    const [dayOfMonth] = useSimVar('E:ZULU DAY OF MONTH', 'number', 1_000);
     const [showStatusBarFlightProgress] = usePersistentNumberProperty('EFB_SHOW_STATUSBAR_FLIGHTPROGRESS', 1);
 
     const history = useHistory();
@@ -155,7 +155,9 @@ export const StatusBar = ({ batteryLevel, isCharging }: StatusBarProps) => {
     }, []);
 
     return (
-        <div className="flex fixed z-40 justify-between items-center px-6 w-full h-10 text-lg font-medium leading-none text-theme-text bg-theme-statusbar">
+        <div
+            className="flex fixed z-40 justify-between items-center px-6 w-full h-10 text-lg font-medium leading-none text-theme-text bg-theme-statusbar"
+        >
             <div
                 className="absolute inset-x-0 bottom-0 h-0.5 bg-theme-highlight"
                 style={{ width: `${shutoffBarPercent}%`, transition: 'width 0.5s ease' }}
@@ -179,22 +181,28 @@ export const StatusBar = ({ batteryLevel, isCharging }: StatusBarProps) => {
                         className="flex overflow-hidden flex-row items-center space-x-4 h-10"
                         onClick={() => setShowSchedTimes((old) => !old)}
                     >
-                        <div className={`${showSchedTimes ? '-translate-y-1/4' : 'translate-y-1/4'} transform transition text-right duration-100 flex flex-col space-y-1`}>
+                        <div
+                            className={`${showSchedTimes ? '-translate-y-1/4' : 'translate-y-1/4'} transform transition text-right duration-100 flex flex-col space-y-1`}
+                        >
                             <p>{departingAirport}</p>
                             <p>{schedOutParsed}</p>
                         </div>
                         <div className="flex flex-row w-32">
                             <div className="h-1 bg-theme-highlight" style={{ width: `${flightPlanProgress}%` }} />
                             <div className="h-1 bg-theme-text" style={{ width: `${100 - flightPlanProgress}%` }} />
                         </div>
-                        <div className={`${showSchedTimes ? '-translate-y-1/4' : 'translate-y-1/4'} transform transition duration-100 flex flex-col space-y-1`}>
+                        <div
+                            className={`${showSchedTimes ? '-translate-y-1/4' : 'translate-y-1/4'} transform transition duration-100 flex flex-col space-y-1`}
+                        >
                             <p>{arrivingAirport}</p>
                             <p>{schedInParsed}</p>
                         </div>
                     </div>
                 )}
 
-                <TooltipWrapper text={localApiConnected ? t('StatusBar.TT.ConnectedToLocalApi') : t('StatusBar.TT.DisconnectedFromLocalApi')}>
+                <TooltipWrapper
+                    text={localApiConnected ? t('StatusBar.TT.ConnectedToLocalApi') : t('StatusBar.TT.DisconnectedFromLocalApi')}
+                >
                     {localApiConnected ? (
                         <Wifi size={26} />
                     ) : (