feat: move style injection from render to useInsetionEffect

[alexandernanberg]

Atm this is just a quick experiment if we can utilize useInsertionEffect instead of injecting styles in render which isn't the best for performance. E.g. following the guidelines described in reactwg/react-18#110

From my limited and quick testing this seems to work fine, is there anything I'm missing and does this sound like a good idea to you? If that is the case I'll clean up the PR a little more, e.g. renaming generateAndInjectStyles to something more fitting

[quantizor]

I'll have to look at this one later. I switched us to use the new effect type for global styles but I'm not sure about doing it for component styles since they need to be injected as fast as possible on first render

[alexandernanberg]

One possible solution could be to inject styles in useInsertionEffect if React 18, otherwise fallback to doing it in render like before

[agriffis]

@probablyup

they need to be injected as fast as possible on first render

I haven't looked at the code in React to verify, but the doc claims "it fires synchronously before all DOM mutations."

That seems to satisfy "as fast as possible" but are there situations where this still isn't enough?

Otherwise this LGTM, pending whatever cleanup @alexandernanberg wanted to do.