Function InstanceSelect

frontend/src/react/components/InstanceSelect.tsx:22–119

({
  value,
  onChange,
  placeholder,
  disabled,
  className,
  portal,
  engines,
}: InstanceSelectProps)

}

export function InstanceSelect({
  value,
  onChange,
  placeholder,
  disabled,
  className,
  portal,
  engines,
}: InstanceSelectProps) {
  const { t } = useTranslation();
  const [instances, setInstances] = useState<Instance[]>([]);

  // Stabilize engines array to avoid re-fetching on every render
  const enginesRef = useRef(engines);
  const stableEngines = useMemo(() => {
    const prev = enginesRef.current;
    if (
      prev &&
      engines &&
      prev.length === engines.length &&
      prev.every((e, i) => e === engines[i])
    ) {
      return prev;
    }
    enginesRef.current = engines;
    return engines;
  }, [engines]);

  const fetchInstances = useCallback(
    (query: string) => {
      useAppStore
        .getState()
        .fetchInstanceList({
          pageSize: getDefaultPagination(),
          filter: { query, engines: stableEngines },
        })
        .then((result) => setInstances(result.instances));
    },
    [stableEngines]
  );

  useEffect(() => {
    fetchInstances("");
  }, [fetchInstances]);

  const handleChange = useCallback(
    (name: string) => {
      const inst = instances.find((i) => i.name === name);
      onChange(name, inst);
    },
    [instances, onChange]
  );

  return (
    <Combobox
      value={value}
      onChange={handleChange}
      placeholder={placeholder ?? t("common.instance")}