[select] Uncaught TypeError: Converting circular structure to JSON

[Profesor08]

Bug report

Current behavior

When I want to use array of object as items for select and pass some item to defaultValue or to value, I get this error. This happens because each object has icon, icon is some react component. And it unable to be serialized in this hook (from stack trace):

base-ui/packages/utils/src/useControlled.ts

Lines 56 to 66 in 1e0f08c

	React.useEffect(() => {
	// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is for more details.
	if (!isControlled && JSON.stringify(defaultValue) !== JSON.stringify(defaultProp)) {
	console.error(
	[
	`Base UI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` +
	`To suppress this warning opt to use a controlled ${name}.`,
	].join('\n'),
	);
	}
	}, [JSON.stringify(defaultProp)]);

There is an example:

// usage
<Select.Root items={shippingMethods} defaultValue={shippingMethods[0]}>

// data
import { AiFillAlipaySquare, AiFillBehanceSquare, AiFillFilter } from "react-icons/ai";

const shippingMethods: ShippingMethod[] = [
  {
    value: "standard",
    label: "Standard",
    duration: "Delivers in 4-6 business days",
    price: "$4.99",
    icon: <AiFillAlipaySquare />,
  },
  {
    value: "express",
    label: "Express",
    duration: "Delivers in 2-3 business days",
    price: "$9.99",
    icon: <AiFillBehanceSquare />,
  },
  {
    value: "overnight",
    label: "Overnight",
    duration: "Delivers next business day",
    price: "$19.99",
    icon: <AiFillFilter />,
  },
];

Expected behavior

No errors

Reproducible example

select-circular-bug.zip

Base UI version

@base-ui/react@1.3.0

Which browser are you using?

Chrome latest

Which OS are you using?

Windows 11

[Profesor08]

I think, using Object.is() or es-toolkit/isEqual should fix this issue.

import { isEqual } from 'es-toolkit';

const { current: defaultValue } = React.useRef(defaultProp);

React.useEffect(() => {
  // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is for more details.
  if (!isControlled && isEqual(defaultValue, defaultProp) === false) {
    console.error(
      [
        `Base UI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` +
          `To suppress this warning opt to use a controlled ${name}.`,
      ].join('\n'),
    );
  }
});