perf: cleanup useComputed (#308)

* Simplify computeds * Update helpers.ts * Update index.tsx
aidenybai · Mar 6, 2025 · 3899c7b · 3899c7b
1 parent 6e470b0
commit 3899c7b
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 85 deletions.
diff --git a/packages/scan/src/web/utils/helpers.ts b/packages/scan/src/web/utils/helpers.ts
@@ -1,18 +1,16 @@
 import {
   type Fiber,
-  ForwardRefTag,
   MemoComponentTag,
   SimpleMemoComponentTag,
   SuspenseComponentTag,
   getDisplayName,
   hasMemoCache,
 } from 'bippy';
 import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { IS_CLIENT } from './constants';
 
 export const cn = (...inputs: Array<ClassValue>): string => {
-  return twMerge(clsx(inputs));
+  return clsx(inputs); // no twMerge for now
 };
 
 export const isFirefox =

diff --git a/packages/scan/src/web/views/index.tsx b/packages/scan/src/web/views/index.tsx
@@ -1,4 +1,4 @@
-import { type ReadonlySignal, useComputed } from '@preact/signals';
+import { type ReadonlySignal, computed } from '@preact/signals';
 import type { ReactNode } from 'preact/compat';
 import { Store } from '~core/index';
 import { signalWidgetViews } from '~web/state';
@@ -8,11 +8,31 @@ import { ViewInspector } from './inspector';
 import { Toolbar } from './toolbar';
 import { NotificationWrapper } from './notifications/notifications';
 
-export const Content = () => {
-  const isInspecting = useComputed(
-    () => Store.inspectState.value.kind === 'inspecting',
-  );
+const isInspecting = computed(
+  () => Store.inspectState.value.kind === 'inspecting',
+);
+
+const headerClassName = computed(() =>
+  cn(
+    'relative',
+    'flex-1',
+    'flex flex-col',
+    'rounded-t-lg',
+    'overflow-hidden',
+    'opacity-100',
+    'transition-[opacity]',
+    isInspecting.value && 'opacity-0 duration-0 delay-0',
+  ),
+);
+
+const isInspectorViewOpen = computed(
+  () => signalWidgetViews.value.view === 'inspector',
+);
+const isNotificationsViewOpen = computed(
+  () => signalWidgetViews.value.view === 'notifications',
+);
 
+export const Content = () => {
   return (
     <div
       className={cn(
@@ -28,20 +48,7 @@ export const Content = () => {
         'peer-hover/bottom:rounded-b-none',
       )}
     >
-      <div
-        className={useComputed(() =>
-          cn(
-            'relative',
-            'flex-1',
-            'flex flex-col',
-            'rounded-t-lg',
-            'overflow-hidden',
-            'opacity-100',
-            'transition-[opacity]',
-            isInspecting.value && 'opacity-0 duration-0 delay-0',
-          ),
-        )}
-      >
+      <div className={headerClassName}>
         <Header />
         <div
           className={cn(
@@ -54,20 +61,12 @@ export const Content = () => {
             'border-b border-[#222]',
           )}
         >
-          <ContentView
-            isOpen={useComputed(
-              () => signalWidgetViews.value.view === 'inspector',
-            )}
-          >
+          <ContentView isOpen={isInspectorViewOpen}>
             <ViewInspector />
           </ContentView>
 
-          <ContentView
-            isOpen={useComputed(
-              () => signalWidgetViews.value.view === 'notifications',
-            )}
-          >
-            <NotificationWrapper/>
+          <ContentView isOpen={isNotificationsViewOpen}>
+            <NotificationWrapper />
           </ContentView>
         </div>
       </div>
@@ -84,15 +83,13 @@ interface ContentViewProps {
 const ContentView = ({ isOpen, children }: ContentViewProps) => {
   return (
     <div
-      className={useComputed(() =>
-        cn(
-          'flex-1',
-          'opacity-0',
-          'overflow-y-auto overflow-x-hidden',
-          'transition-opacity delay-0',
-          'pointer-events-none',
-          isOpen.value && 'opacity-100 delay-150 pointer-events-auto',
-        ),
+      className={cn(
+        'flex-1',
+        'opacity-0',
+        'overflow-y-auto overflow-x-hidden',
+        'transition-opacity delay-0',
+        'pointer-events-none',
+        isOpen.value && 'opacity-100 delay-150 pointer-events-auto',
       )}
     >
       <div className="absolute inset-0 flex">{children}</div>

diff --git a/packages/scan/src/web/views/inspector/header.tsx b/packages/scan/src/web/views/inspector/header.tsx
@@ -1,11 +1,20 @@
-import { untracked, useComputed, useSignalEffect } from '@preact/signals';
+import { computed, untracked, useSignalEffect } from '@preact/signals';
 import type { Fiber } from 'bippy';
 import { useMemo, useRef, useState } from 'preact/hooks';
 import { Store } from '~core/index';
 import { signalIsSettingsOpen } from '~web/state';
 import { cn, getExtendedDisplayName } from '~web/utils/helpers';
 import { timelineState } from './states';
 
+const headerInspectClassName = computed(() =>
+  cn(
+    'absolute inset-0 flex items-center gap-x-2',
+    'translate-y-0',
+    'transition-transform duration-300',
+    signalIsSettingsOpen.value && '-translate-y-[200%]',
+  ),
+);
+
 export const HeaderInspect = () => {
   const refReRenders = useRef<HTMLSpanElement>(null);
   const refTiming = useRef<HTMLSpanElement>(null);
@@ -102,16 +111,7 @@ export const HeaderInspect = () => {
   }, [currentFiber]);
 
   return (
-    <div
-      className={useComputed(() =>
-        cn(
-          'absolute inset-0 flex items-center gap-x-2',
-          'translate-y-0',
-          'transition-transform duration-300',
-          signalIsSettingsOpen.value && '-translate-y-[200%]',
-        ),
-      )}
-    >
+    <div className={headerInspectClassName}>
       {componentName}
       <div className="flex items-center gap-x-2 mr-auto text-xs text-[#888]">
         <span

diff --git a/packages/scan/src/web/views/inspector/index.tsx b/packages/scan/src/web/views/inspector/index.tsx
@@ -1,4 +1,4 @@
-import { untracked, useComputed, useSignalEffect } from '@preact/signals';
+import { computed, untracked, useSignalEffect } from '@preact/signals';
 import type { Fiber } from 'bippy';
 import { Component } from 'preact';
 import { useEffect, useRef } from 'preact/hooks';
@@ -78,6 +78,18 @@ class InspectorErrorBoundary extends Component {
   }
 }
 
+const inspectorContainerClassName = computed(() =>
+  cn(
+    'react-scan-inspector',
+    'flex-1',
+    'opacity-0',
+    'overflow-y-auto overflow-x-hidden',
+    'transition-opacity delay-0',
+    'pointer-events-none',
+    !signalIsSettingsOpen.value && 'opacity-100 delay-300 pointer-events-auto',
+  ),
+);
+
 const Inspector = /* @__PURE__ */ constant(() => {
   const refLastInspectedFiber = useRef<Fiber | null>(null);
 
@@ -188,20 +200,7 @@ const Inspector = /* @__PURE__ */ constant(() => {
 
   return (
     <InspectorErrorBoundary>
-      <div
-        className={useComputed(() =>
-          cn(
-            'react-scan-inspector',
-            'flex-1',
-            'opacity-0',
-            'overflow-y-auto overflow-x-hidden',
-            'transition-opacity delay-0',
-            'pointer-events-none',
-            !signalIsSettingsOpen.value &&
-              'opacity-100 delay-300 pointer-events-auto',
-          ),
-        )}
-      >
+      <div className={inspectorContainerClassName}>
         <WhatChangedSection />
         <StickySection>
           {(props) => <PropertySection section="props" {...props} />}

diff --git a/packages/scan/src/web/views/inspector/what-changed.tsx b/packages/scan/src/web/views/inspector/what-changed.tsx
@@ -92,26 +92,18 @@ export const WhatChangedSection = /* @__PURE__ */ memo(() => {
     }
   });
 
-  return (
+  return useComputed(() => (
     <>
-      {useComputed(
-        () =>
-          showTimeline.value && (
-            <StickySection>{(props) => <Timeline {...props} />}</StickySection>
-          ),
+      {showTimeline.value && (
+        <StickySection>{(props) => <Timeline {...props} />}</StickySection>
       )}
-      {useComputed(() => (
-        <StickySection>
-          {(props) => (
-            <WhatChanged
-              {...props}
-              shouldShowChanges={shouldShowChanges.value}
-            />
-          )}
-        </StickySection>
-      ))}
+      <StickySection>
+        {(props) => (
+          <WhatChanged {...props} shouldShowChanges={shouldShowChanges.value} />
+        )}
+      </StickySection>
     </>
-  );
+  ));
 });
 
 export const WhatChanged = /* @__PURE__ */ memo(