feat: enhance type definitions and improve memoization in ConsolePanelItem and NetworkPanelItem

Author: purrseus

src/ui/Xenon.tsx

@@ -10,13 +10,19 @@ import { type DebuggerState } from '../types';
 import { Bubble, IndexedStack, Panel, SearchBar } from './components';
 
 namespace Xenon {
-  interface Methods {
+  export interface Methods {
     isVisible(): boolean;
     show(): void;
     hide(): void;
   }
 
-  interface Props {
+  export interface Props {
+    children: ReactNode;
+    /**
+     * If true, completely disables the debugger by rendering only the children components without any debugging functionality.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Determines whether the network inspector is automatically enabled upon initialization.
      * @default true
@@ -45,23 +51,14 @@ namespace Xenon {
     includeDomains?: string[];
   }
 
-  interface WrapperProps extends Props {
-    /**
-     * If true, completely disables the debugger by rendering only the children components without any debugging functionality.
-     * @default false
-     */
-    disabled?: boolean;
-    children: ReactNode;
-  }
-
   enableMapSet();
   const ref = createRef<Methods>();
 
   /**
    * Checks whether the debugger is currently visible.
    * @returns `true` if the debugger is currently visible, otherwise `false`.
    */
-  export const isVisible = () => ref.current?.isVisible() ?? false;
+  export const isVisible = (): boolean => ref.current?.isVisible() ?? false;
 
   /**
    * Makes the debugger visible. If it is already visible, this method has no additional effect.
@@ -75,14 +72,14 @@ namespace Xenon {
    */
   export const hide = (): void => ref.current?.hide();
 
-  const Debugger = memo(
+  const Debugger = memo<Omit<Props, 'children' | 'disabled'>>(
     ({
       autoInspectNetworkEnabled = true,
       autoInspectConsoleEnabled = true,
       bubbleSize = 40,
       idleBubbleOpacity = 0.5,
       includeDomains,
-    }: Props) => {
+    }) => {
       const dimensions = useWindowDimensions();
 
       const [debuggerState, setDebuggerState] = useImmer<DebuggerState>({
@@ -142,9 +139,15 @@ namespace Xenon {
         </MainContext.Provider>
       );
     },
+    (prevProps, nextProps) =>
+      prevProps.autoInspectNetworkEnabled === nextProps.autoInspectNetworkEnabled &&
+      prevProps.autoInspectConsoleEnabled === nextProps.autoInspectConsoleEnabled &&
+      prevProps.bubbleSize === nextProps.bubbleSize &&
+      prevProps.idleBubbleOpacity === nextProps.idleBubbleOpacity &&
+      JSON.stringify(prevProps.includeDomains) === JSON.stringify(nextProps.includeDomains),
   );
 
-  export function Wrapper({ disabled = false, children, ...props }: WrapperProps): JSX.Element {
+  export function Wrapper({ disabled = false, children, ...props }: Props): JSX.Element {
     if (disabled) return children as JSX.Element;
 
     return (

src/ui/components/items/ConsolePanelItem.tsx

@@ -22,9 +22,9 @@ const ConsolePanelItem = memo<ConsolePanelItemProps>(
       </Touchable>
     );
   },
-  (prevProps, nextProps) => {
-    return prevProps.type === nextProps.type && prevProps.values === nextProps.values;
-  },
+  (prevProps, nextProps) =>
+    prevProps.type === nextProps.type &&
+    JSON.stringify(prevProps.values) === JSON.stringify(nextProps.values),
 );
 
 const styles = StyleSheet.create({

src/ui/components/items/NetworkPanelItem.tsx

@@ -101,15 +101,12 @@ const NetworkPanelItem = memo<NetworkPanelItemProps>(
       </View>
     );
   },
-  (prevProps, nextProps) => {
-    return (
-      prevProps.method === nextProps.method &&
-      prevProps.name === nextProps.name &&
-      prevProps.startTime === nextProps.startTime &&
-      prevProps.endTime === nextProps.endTime &&
-      prevProps.status === nextProps.status
-    );
-  },
+  (prevProps, nextProps) =>
+    prevProps.method === nextProps.method &&
+    prevProps.name === nextProps.name &&
+    prevProps.startTime === nextProps.startTime &&
+    prevProps.endTime === nextProps.endTime &&
+    prevProps.status === nextProps.status,
 );
 
 const styles = StyleSheet.create({