useSelect causing immediate rerender

[bdow]

Hi all,

I have been investigating some performance issues with our app and noticed that useSelect causes an immediate re-render. I profiled the example provided in CodeSandbox (https://xzc4r.csb.app/) to make sure it wasn't something I was doing locally, and I see the immediate re-render triggered there as well. Is this something that can be avoided?

[snowystinger]

For anyone wanting to look at the code, here's the link to the full codesandbox https://codesandbox.io/s/xzc4r?file=/src/App.js

[snowystinger]

I just tried profiling as well, steps were

1. start profiling
2. click in the combobox
3. type 'a'
4. stop profiling

I did not get a Select re-rendering, can you share your steps?

[bdow]

Hi @snowystinger - Thanks for the reply. The issue I am seeing is specific to the useSelect hook, not the ComboBox.
To reproduce.

1. After loading the page, click the "Reload and start profiling".
2. Once it loads, stop profiling. No further interaction is needed.
3. Here you should see two renders, the second render is the one I included a screenshot of.

[snowystinger]

Ah, too many things in that App, here's a simpler one https://codesandbox.io/s/exciting-bird-5efbt, I've also added some console logs to it

I found this to be the two things that changed from render one to two, some label ids and then the ref goes from null to having a value

So these are probably good places to start debugging, you may need to dip into our codebase as well. this is as far as I can go today.

To help you with that:
We have a good story already set up in our storybook that has the same issue https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/select/stories/example.tsx
You could start by deleting code to see at what point it becomes one render, probably useSelect, restore it, then you can dive into that hook and start commenting out code until it's one render again.
Rinse and repeat until you know where that second render is coming from.

[bdow]

Thank you for the thorough analysis! I will take a look at the codebase. Thanks again!