talk icon indicating copy to clipboard operation
talk copied to clipboard

[CORL-2451]: Update to React 18

Open kabeaty opened this issue 3 years ago • 1 comments
trafficstars

What does this PR do?

These changes update Coral to use React 18. To achieve this, the following changes were required:

package updates

  • updating Prettier, which is why there are some formatting/linting changes throughout
  • updating @fluent/react, which included updates to Localized props. Vars are now all included in a vars prop and elements are now always included in an elems prop, instead of all separate props for each var/elem before.

A few other packages had to be updated, but these are the main ones that required significant changes along with their upgrades.

React updates

  • children has to be explicitly included in a component's props now
  • createRoot instead of ReactDOM.render

test updates

  • some tests had to be converted to React Testing Library
  • some tests needed additional acts/awaits

Note that unfortunately we cannot yet use createRoot for the stream. This is due to this issue in Virtuoso. So, the stream will use ReactDOM.render for now and be on React 17. Once this issue is resolved, we should be able to switch it over too.

What changes to the GraphQL/Database Schema does this PR introduce?

none

Does this PR introduce any new environment variables or feature flags?

no

If any indexes were added, were they added to INDEXES.md?

n/a

How do I test this PR?

You can test this by clicking around and seeing that everything still looks and works as expected in the stream/admin.

How do we deploy this PR?

kabeaty avatar Sep 21 '22 20:09 kabeaty

Deploy Preview for gallant-galileo-14878c canceled.

Name Link
Latest commit 6160f416060dd187db478426ed917f2ba9c7804a
Latest deploy log https://app.netlify.com/sites/gallant-galileo-14878c/deploys/633382702eaea3000a4735ef

netlify[bot] avatar Sep 21 '22 20:09 netlify[bot]