addressing PR feedback from code rabbit

Author: dannyroosevelt

packages/connect-react/src/components/ControlSelect.tsx

@@ -135,29 +135,32 @@ export function ControlSelect<T extends PropOptionValue>({
   // Memoize custom components to prevent remounting
   // Recompute when caller/customizer supplies new component overrides
   const finalComponents = useMemo(() => {
-    const base = {
-      ...props.components,
-      ...componentsOverride,
+    const mergedComponents = {
+      ...(props.components ?? {}),
+      ...(componentsOverride ?? {}),
     };
+    const ParentMenuList = mergedComponents.MenuList ?? components.MenuList;
 
     // Always set MenuList, conditionally render button inside
     const CustomMenuList = ({
       // eslint-disable-next-line react/prop-types
       children, ...menuProps
     }: MenuListProps<LabelValueOption<T>, boolean>) => (
-      <components.MenuList  {...menuProps}>
+      <ParentMenuList {...menuProps}>
         {children}
         {showLoadMoreButtonRef.current && (
           <div className="pt-4">
             <LoadMoreButton onChange={() => onLoadMoreRef.current?.()} />
           </div>
         )}
-      </components.MenuList>
+      </ParentMenuList>
     );
     CustomMenuList.displayName = "CustomMenuList";
-    base.MenuList = CustomMenuList;
 
-    return base;
+    return {
+      ...mergedComponents,
+      MenuList: CustomMenuList,
+    };
   }, [
     props.components,
     componentsOverride,

packages/connect-react/src/components/RemoteOptionsContainer.tsx

@@ -11,9 +11,7 @@ import { useFrontendClient } from "../hooks/frontend-client-context";
 import {
   ConfigureComponentContext, RawPropOption,
 } from "../types";
-import {
-  isString, sanitizeOption,
-} from "../utils/type-guards";
+import { sanitizeOption } from "../utils/type-guards";
 import { ControlSelect } from "./ControlSelect";
 
 export type RemoteOptionsContainerProps = {
@@ -28,12 +26,8 @@ type ConfigurePropResult = {
 
 // Helper to extract value from an option
 const extractOptionValue = (o: RawPropOption): PropOptionValue | null => {
-  if (isString(o)) {
-    return o;
-  } else if (o && typeof o === "object" && "value" in o && o.value != null) {
-    return o.value;
-  }
-  return null;
+  const normalized = sanitizeOption(o);
+  return normalized.value ?? null;
 };
 
 export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerProps) {
@@ -138,13 +132,8 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
     query,
   ]);
 
-  // React Query key excludes dynamicPropsId
   const queryKeyInput = useMemo(() => {
-    const {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      dynamicPropsId: _dynamicPropsId, ...rest
-    } = componentConfigureInput;
-    return rest;
+    return componentConfigureInput;
   }, [
     componentConfigureInput,
   ]);
@@ -215,16 +204,14 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
         };
       }
 
-      let _options: RawPropOption[] = [];
-      if (options?.length) {
-        _options = options;
-      }
-      if (stringOptions?.length) {
-        _options = stringOptions.map((str) => ({
-          label: str,
-          value: str,
-        }));
-      }
+      const stringOptionObjects = stringOptions?.map((str) => ({
+        label: str,
+        value: str,
+      })) ?? [];
+      const _options: RawPropOption[] = [
+        ...(options ?? []),
+        ...stringOptionObjects,
+      ];
 
       return {
         error: undefined,

packages/connect-react/src/components/SelectApp.tsx

@@ -1,5 +1,5 @@
 import {
-  useId, useState, useEffect, useMemo, useCallback,
+  useId, useState, useEffect, useMemo, useCallback, useRef,
 } from "react";
 import Select, { components } from "react-select";
 import type {
@@ -63,6 +63,13 @@ export function SelectApp({
     MenuList,
   } = components;
 
+  const isLoadingMoreRef = useRef(isLoadingMore);
+  useEffect(() => {
+    isLoadingMoreRef.current = isLoadingMore;
+  }, [
+    isLoadingMore,
+  ]);
+
   // Memoize the selected value to prevent unnecessary recalculations
   const selectedValue = useMemo(() => {
     return apps?.find((o: App) => o.nameSlug === value?.nameSlug)
@@ -86,8 +93,6 @@ export function SelectApp({
   ]);
 
   // Memoize custom components to prevent remounting
-  // Note: Don't include isLoadingMore in deps - it's read from closure
-  // and components will re-render naturally when parent re-renders
   const customComponents = useMemo(() => ({
     Option: (optionProps: OptionProps<App>) => (
       <Option {...optionProps}>
@@ -135,7 +140,7 @@ export function SelectApp({
     MenuList: (props: MenuListProps<App>) => (
       <MenuList {...props}>
         {props.children}
-        {isLoadingMore && (
+        {isLoadingMoreRef.current && (
           <div style={{
             padding: "8px 12px",
             textAlign: "center",

packages/connect-react/src/components/SelectComponent.tsx

@@ -3,7 +3,11 @@ import {
   Component,
 } from "@pipedream/sdk";
 import {
-  useId, useMemo, useCallback,
+  useId,
+  useMemo,
+  useCallback,
+  useRef,
+  useEffect,
 } from "react";
 import Select, { components } from "react-select";
 import type { MenuListProps } from "react-select";
@@ -36,6 +40,13 @@ export function SelectComponent({
 
   const { MenuList } = components;
 
+  const isLoadingMoreRef = useRef(isLoadingMore);
+  useEffect(() => {
+    isLoadingMoreRef.current = isLoadingMore;
+  }, [
+    isLoadingMore,
+  ]);
+
   // Memoize the selected value to prevent unnecessary recalculations
   const selectedValue = useMemo(() => {
     return componentsList?.find((c: Component) => c.key === value?.key) || null;
@@ -56,13 +67,11 @@ export function SelectComponent({
   ]);
 
   // Memoize custom components to prevent remounting
-  // Note: Don't include isLoadingMore in deps - it's read from closure
-  // and MenuList will re-render naturally when parent re-renders
   const customComponents = useMemo(() => ({
     MenuList: (props: MenuListProps<Component>) => (
       <MenuList {...props}>
         {props.children}
-        {isLoadingMore && (
+        {isLoadingMoreRef.current && (
           <div style={{
             padding: "8px 12px",
             textAlign: "center",

packages/connect-react/src/hooks/use-apps.tsx

@@ -54,7 +54,7 @@ export const useApps = (input?: AppsListRequest): UseAppsResult => {
 
   // Reset pagination ONLY when query params change, not on refetches
   useEffect(() => {
-    const inputKey = JSON.stringify(input);
+    const inputKey = JSON.stringify(input ?? null);
     const isNewQuery = prevInputRef.current !== inputKey;
 
     if (query.data && isNewQuery) {

packages/connect-react/src/hooks/use-components.tsx

@@ -55,7 +55,7 @@ export const useComponents = (input?: ComponentsListRequest): UseComponentsResul
 
   // Reset pagination ONLY when query params change, not on refetches
   useEffect(() => {
-    const inputKey = JSON.stringify(input);
+    const inputKey = JSON.stringify(input ?? null);
     const isNewQuery = prevInputRef.current !== inputKey;
 
     if (query.data && isNewQuery) {