Reach-ui: [Combobox] throws "useLayoutEffect does nothing on the server" warning

[felixmosh]

🐛 Bug report

With a simple usage on SSR because of the use of useLayoutEffect ssr throws warning.

Expected behavior

Render this on the server

function Example() {
  return (
    <div>
      <h4 id="demo">Basic, Fixed List Combobox</h4>
      <Combobox>
        <ComboboxInput aria-labelledby="demo" />
        <ComboboxPopover>
          <ComboboxList aria-labelledby="demo">
            <ComboboxOption value="Apple" />
            <ComboboxOption value="Banana" />
            <ComboboxOption value="Orange" />
            <ComboboxOption value="Pineapple" />
            <ComboboxOption value="Kiwi" />
          </ComboboxList>
        </ComboboxPopover>
      </Combobox>
    </div>
  );
}

Reproducible example

There are 2 solutions here, but I don't think that each one of the lib consumers should lazy load this combobox.

CodeSandbox

Suggested solution(s)

https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85

Additional context

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the serve
r renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the in
tended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on t
he client.

Your environment

| Software | Name/Version(s) |
| ------------------------ | --------------- |
| [REACH_PACKAGE_NAME] | Combobox
| React | 16.10.2
| Browser | all
| Assistive tech |
| Node | 12
| npm/yarn |
| Operating System |

[chaance]

In this package we are using useLayoutEffect in to store options in a ref so that they are ready for keyboard interaction. We need to use this hook instead of useEffect because we need to reset the array on every render before the ComboboxOption items are pushed into the array, which keeps them accurate. I spun up a test project with Next.js, and I don't actually see any rendering discrepancies between server and the client. I'm wondering if this might be a slightly over-cautious warning on React's part.

It appears that the React team hasn't decided how to deal with this error messages in instances where it might be ignored. Looks like there's a lengthy discussion here https://github.com/facebook/react/issues/14927

[VinSpee]

looks like https://www.npmjs.com/package/react-layout-effect was created to avoid the overly-cautious errors, might be an option

[Grsmto]

Does anyone figured out a workaround for this? Or using a fork fixing this?
It's really blocking me, spamming the console makes the library pretty much unusable. :(

[felixmosh]

reach has an useIsomorphicLayoutEffect that combobox should use.

For meanwhile, I'm rendering it only after mounting 🙁