Optimized a few components

src-web/components/RequestPane.tsx

@@ -1,13 +1,15 @@
 import classnames from 'classnames';
-import { act } from 'react-dom/test-utils';
+import { useCallback, useMemo } from 'react';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
 import { useKeyValue } from '../hooks/useKeyValue';
 import { useSendRequest } from '../hooks/useSendRequest';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
 import { tryFormatJson } from '../lib/formatters';
+import type { HttpHeader } from '../lib/models';
 import { Editor } from './core/Editor';
 import { PairEditor } from './core/PairEditor';
+import type { TabItem } from './core/Tabs/Tabs';
 import { TabContent, Tabs } from './core/Tabs/Tabs';
 import { GraphQLEditor } from './editors/GraphQLEditor';
 import { UrlBar } from './UrlBar';
@@ -19,14 +21,45 @@ interface Props {
 
 export function RequestPane({ fullHeight, className }: Props) {
   const activeRequest = useActiveRequest();
-  const updateRequest = useUpdateRequest(activeRequest);
-  const sendRequest = useSendRequest(activeRequest);
+  const activeRequestId = activeRequest?.id ?? null;
+  const updateRequest = useUpdateRequest(activeRequestId);
+  const sendRequest = useSendRequest(activeRequestId);
   const responseLoading = useIsResponseLoading();
   const activeTab = useKeyValue<string>({
-    key: ['active_request_body_tab', activeRequest?.id ?? 'n/a'],
+    key: ['active_request_body_tab', activeRequestId ?? 'n/a'],
     initialValue: 'body',
   });
 
+  const tabs: TabItem[] = useMemo(
+    () => [
+      {
+        value: 'body',
+        label: activeRequest?.bodyType ?? 'NoBody',
+        options: {
+          onValueChange: (t) => updateRequest.mutate({ bodyType: t.value }),
+          value: activeRequest?.bodyType ?? 'nobody',
+          items: [
+            { label: 'No Body', value: 'nobody' },
+            { label: 'JSON', value: 'json' },
+            { label: 'GraphQL', value: 'graphql' },
+          ],
+        },
+      },
+      { value: 'params', label: 'Params' },
+      { value: 'headers', label: 'Headers' },
+      { value: 'auth', label: 'Auth' },
+    ],
+    [],
+  );
+
+  const handleMethodChange = useCallback((method: string) => updateRequest.mutate({ method }), []);
+  const handleUrlChange = useCallback((url: string) => updateRequest.mutate({ url }), []);
+  const handleBodyChange = useCallback((body: string) => updateRequest.mutate({ body }), []);
+  const handleHeadersChange = useCallback(
+    (headers: HttpHeader[]) => updateRequest.mutate({ headers }),
+    [],
+  );
+
   if (activeRequest === null) return null;
 
   return (
@@ -35,32 +68,15 @@ export function RequestPane({ fullHeight, className }: Props) {
         key={activeRequest.id}
         method={activeRequest.method}
         url={activeRequest.url}
-        onMethodChange={(method) => updateRequest.mutate({ method })}
-        onUrlChange={(url) => updateRequest.mutate({ url })}
+        onMethodChange={handleMethodChange}
+        onUrlChange={handleUrlChange}
         sendRequest={sendRequest}
         loading={responseLoading}
       />
       <Tabs
         value={activeTab.value}
         onChangeValue={activeTab.set}
-        tabs={[
-          {
-            value: 'body',
-            label: activeRequest.bodyType ?? 'NoBody',
-            options: {
-              onValueChange: (bodyType) => updateRequest.mutate({ bodyType: bodyType.value }),
-              value: activeRequest.bodyType ?? 'nobody',
-              items: [
-                { label: 'No Body', value: 'nobody' },
-                { label: 'JSON', value: 'json' },
-                { label: 'GraphQL', value: 'graphql' },
-              ],
-            },
-          },
-          { value: 'params', label: 'Params' },
-          { value: 'headers', label: 'Headers' },
-          { value: 'auth', label: 'Auth' },
-        ]}
+        tabs={tabs}
         className="mt-2"
         label="Request body"
       >
@@ -68,7 +84,7 @@ export function RequestPane({ fullHeight, className }: Props) {
           <PairEditor
             key={activeRequest.id}
             pairs={activeRequest.headers}
-            onChange={(headers) => updateRequest.mutate({ headers })}
+            onChange={handleHeadersChange}
           />
         </TabContent>
         <TabContent value="body">
@@ -80,7 +96,7 @@ export function RequestPane({ fullHeight, className }: Props) {
               heightMode={fullHeight ? 'full' : 'auto'}
               defaultValue={activeRequest.body ?? ''}
               contentType="application/json"
-              onChange={(body) => updateRequest.mutate({ body })}
+              onChange={handleBodyChange}
               format={activeRequest.bodyType === 'json' ? (v) => tryFormatJson(v) : undefined}
             />
           ) : activeRequest.bodyType === 'graphql' ? (
@@ -88,7 +104,7 @@ export function RequestPane({ fullHeight, className }: Props) {
               key={activeRequest.id}
               className="!bg-gray-50"
               defaultValue={activeRequest?.body ?? ''}
-              onChange={(body) => updateRequest.mutate({ body })}
+              onChange={handleBodyChange}
             />
           ) : (
             <div className="h-full text-gray-400 flex items-center justify-center">No Body</div>