Most of the MFEs of edX are currently using React JS v16. In order to use latest React JS, we are planning to upgrade React JS to v17. React 17 doesn’t add any new developer-facing features, so its upgrade might not cause any breaking changes. Our end goal is to upgrade React to v18 but v18 no longer support enzyme, so we are upgrading to React 17 and then we’ll migrate from enzyme.
Features of React 17
Enabling the gradual upgrades: Previously required upgrading whole app at once, gets increasingly challenging if the codebase was ancient and isn’t actively maintained. We can now upgrade it in parts apart from upgrading the whole app (better to upgrade the whole app though).
Event delegation Change: Previously attaches all the events at a document(top) level, in 17 they decided to shift from document level to the root DOM container into which React tree is rendered.
New JSX transform: React imports no longer required to use JSX, more geared towards how JSX is compiled rather than a feature change, comes with a performance boost. This does bring about code changes, but nothing major and pretty easy to manage. (Removing import statement will result in linter going off but eslint config upgrade should take care of it)
Don't emulate bubbling of the onScroll event
Use browser focusin and focusout for onFocus and onBlur
Make all Capture events use the browser capture phrase
Remove event pooling
Run useEffect cleanup function asynchronously
For some packages their older versions could cause issues with react v17 upgrade (pinned couple)
We will create tickets in each MFE for React upgrade and all the tickets will be added in Maintenance board. Then we’ll create PRs in each MFEs and will add those in the Maintenance board as well.
Reinstall and re-build: npm install && npm run build
You may need to upgrade other libraries, for example in case of Typescript: npm install @firstname.lastname@example.org If you are using React Testing Library, you would want to be under 12.1.5, which is the latest version that supports React < 18. Replace enzyme-adapter-react-16 with @wojtekmaj/enzyme-adapter-react-17 since enzyme doesn't provide support for react 17. react-test-renderer should also be updated.
Upgrade all other packages causing dependency conflicts
Upgrade all edx packages used in the MFE to their react 17 versions
Try to run the project npm run start and fix dependencies along with possible breaks, note all the issues