Controlled value with react-select - Warning: Can't perform a React state update on a component that hasn't mounted yet.

[gino]

Hi there,

I am using react-select to create a Combobox/Select component in combination with react-hook-form. Unfortunately, I keep having the following error:

Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.

The Combobox component:

export function Combobox<T extends FieldValues>({
  items,
  ...props
}: Props & UseControllerProps<T>) {
  const {
    field: { ref, value, onChange },
  } = useController(props);

  return (
    <ReactSelect
      ref={ref}
      options={items}
      menuPlacement="auto"
      menuPortalTarget={document.querySelector("#overlays") as HTMLElement}
      onChange={onChange}
      value={items.find((i) => i.value === value)}
    />
  );
}

The error might come from the items.find() function but this needed in order to have a controlled value by react-hook-form.

I was using the Combobox component from @headlessui/react before and I had the same issue. I have no idea why this is happening. Hope someone is able to help me out.

Thanks a lot!

Edit: Using Vite (4.1.0), React 18.2.0, react-router with lazy loaded routes (for some reason the error doesn't occur when I don't lazy load my route), but this shouldn't be an issue I think?

[leapful]

@gino

Please provide a codesandbox url to re-produce the issue. Posting only your Combox component implementation does not help to investigate it since the root cause might be outside your component like wrong configuration, mis-using React hooks ...