Switch to createRoot API for rendering

[jonkoops]

Works towards closing #7142. More information can be found in the React 18 migration guide.

[patternfly-build]

Preview: https://patternfly-react-pr-8027.surge.sh

A11y report: https://patternfly-react-pr-8027-a11y.surge.sh

[wise-king-sullyman]

@jonkoops looks like for some reason this change causes an error to pop up in the integration tests for the menu component, do you have any guess as to why that might be?

[jonkoops]

@wise-king-sullyman It might have something to do with the fact that under Strict Mode component effects will get triggered twice. This is done during development to ensure that effects are cleaned up properly.

However, that should not impact a production build. So I am not entirely sure what is going on here.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[jonkoops]

Bumping this for stalebot

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[jonkoops]

bump

[wise-king-sullyman]

I'm still not sure what's going on with the failing integration test here.

@nicolethoen do you have any ideas? Also would this need to be updating to target the v5 branch now?

[jonkoops]

@wise-king-sullyman when opting in to the new root API it also enables the new concurrent renderer (see React Docs). There must be something in PatternFly that is not compatible with this new renderer.

I am seeing the same in our application when the new root API is used. I have yet to find out why though, as there is no error logged to indicate anything is wrong.

[nicolethoen]

yes this should be updated to the v5 branch. I'll have to investigate further to see if I have any ideas. The last time I looked at this PR I couldn't identify the problem

[jonkoops]

I went ahead and changed the target branch to v5. Still not quite sure why things are breaking, but we should get this fixed to offer full React 18 support.

[tlabaj]

@jonkoops it does not like the "click" in this test.

patternfly-react/packages/react-integration/cypress/integration/menu.spec.ts

Line 32 in 1138b9f

cy.get('#edit').click();

The flyout menu item is not clickable. The flyout menu renders on mouseover.
The test case in not testing anything. You can disable it and that should fix your PR so we can merge it.

[jonkoops]

@tlabaj thanks for the tip, looks like skip()ing this test did fix the issue.

[tlabaj]

LGTM

[wise-king-sullyman]

🥳

[patternfly-build]

Your changes have been released in:

• demo-app-ts@5.0.0-alpha.25
• @patternfly/react-integration@5.0.0-alpha.11

Thanks for your contribution! 🎉