Skip to content

🐛 Select: Maximum update depth exceeded when rendering complex components in optionRender #487

@tjx666

Description

@tjx666

Summary

Rendering components like Tag, Icon, or Tooltip (from @lobehub/ui) inside Select's optionRender causes a "Maximum update depth exceeded" crash. The infinite loop originates from forkRef.cleanupdispatchSetState → re-render cycle in @base-ui/react@1.0.0.

Reproduction

import { Select } from '@lobehub/ui/base-ui';
import { Tag, Icon } from '@lobehub/ui';
import { Wrench } from 'lucide-react';

<Select
  options={[{ label: 'Model A', value: 'a' }]}
  optionRender={(option) => (
    <div>
      {option.label}
      {/* Adding Tag/Icon here triggers the crash */}
      <Tag color="info" size="small">
        <Icon icon={Wrench} />
      </Tag>
    </div>
  )}
/>

Clicking the Select to open the dropdown triggers:

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.

    at forkRef.cleanup
    at dispatchSetState
    ...

Root Cause

@base-ui/react@1.0.0 has known loop bugs in Select's popup rendering. The CHANGELOG shows multiple related fixes in later versions:

  • v1.1.0 — Dialog: Fix Maximum update depth exceeded error with Suspense (#3700)
  • v1.2.0 — Field: Fix max update depth loop (#3931)
  • v1.2.0 — Select: Fix scroll height loop (#3795)

Suggested Fix

Upgrade @base-ui/react from 1.0.0 to 1.2.0. The Select scroll height loop fix (#3795) and general ref management improvements should resolve this.

Current Workaround

In lobe-chat, we avoid rendering complex components inside optionRender by setting showInfoTag={false}:

Environment

  • @lobehub/ui: 5.4.0
  • @base-ui/react: 1.0.0 (bundled in @lobehub/ui)
  • React: 19.2.x

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions