React 18 support

[brunolemos]

It's not working when using the new createRoot from React 18. Works when using the legacy ReactDOM.render.

Depending on the align value it may even freeze the application.

https://codesandbox.io/s/sweet-solomon-j2nuv6

[gaearon]

We're also seeing async infinite loop in antd with React 18 which happen inside rc-trigger and rc-align.

See facebook/react#24239 for repro case, although it's not very reliable.

[fxlrnrpt]

We also see it in Flipper. Rolling back to ReactDOM.render instead of createRoot seems to help.
We also managed to find a hacky patch. As @gaearon pointed out, the underlying issue seems to come from here. alignedClassName is always undefined.
If we replace

Promise.resolve().then(() => {
            forceAlign();
          });

with

(new Promise(resolve => setTimeout(resolve))).then(() => {
            forceAlign();
          });

it seems to work again.
My gut tells me that it might be because of the automatic batching of state updates in React 18.

UPD: A better idea might be to use useRef for alignedClassName

[fxlrnrpt]

I believe it should be resolved by 017131d

[brunolemos]

Latest version is working fine, thanks!