Listbox render props clearing when parent component state changes

[AustinKostreba]

I feel like I could be misunderstanding something very basic, but I can't seem to find a solution to this anywhere.

When I create a component that contains a Headless UI listbox and include it in a parent component, if a hook causes state to change in the parent, the selected render prop in Listbox.Option gets unselected.

For example, for the following component

function ListboxComponent(items, onChange, value) {
  return (
    <Listbox
      value={value}
      onChange={onChange}
    >
      <Listbox.Button>{value.name}</Listbox.Button>
      <Listbox.Options>
        {items.map((item) => (
          <Listbox.Option key={item.id} value={item} as={Fragment}>
            {({ selected }) => (
              <li className="flex justify-between">
                <span className={`font-base p-1`}>{item.name}</span>
                {selected ? <CheckIcon className="h-5 w-5" /> : null}
              </li>
            )}
          </Listbox.Option>
        ))}
      </Listbox.Options>
    </Listbox>
  )
}

If I import this component into another:

import ListboxComponent from '../somewhere'

function ParentComponent() {
  const items = [
    {
      id: 1,
      name: 'one'
    },
    {
      id: 2,
      name: 'two'
    }
  ]

  const test = useDelay() // a custom hook that sets "test" to true after 5 seconds
  const [selected, setSelected] = useState(items[0])

  return (
    <>
      <div>Some other content to render</div>
      <ListboxComponent items={items} onChange={setSelected} value={selected} />
    </>
  )
}

export default ParentComponent

The listbox will correctly render and check the first option. However, after 5 seconds, the useDelay() hook changes its value from false to true, and that state change causes the Listbox.Option selected prop to clear, and the checkbox within the select list disappears.

Any idea on what's causing the render prop to clear when any arbitrary state in the parent changes, even when that state doesn't necessarily affect any rendering in the parent component? I'm not super well-versed in react, so this might be me simply not understanding something basic.

Thanks!

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

The issue is that your const items inside the ParentComponent will be re-created every render, therefore all the objects inside the array will also be recreated every render and therefore items.includes(knownItemInTheComponent) will always be false.

You can apply a few fixes here:

• Make sure your items array is stable over multiple renders. You can use a useState or useRef
• Another solution is to use the item.id as the value instead of the item itself. Because your id is a primitive and therefore will be stable over time.

With "stable" I mean the reference:

1 === 1 // true
{ id: 1 } === { id: 1 } // false

[AustinKostreba]

Thanks Robin, That's exactly the issue I was having. Making sure my array was stable was the solution!