React 17 Upgrade

Owned by Muhammad Abdullah Waheed Khan
Last updated: Jul 03, 2023
2 min read

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)

From changeLog

  • 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)

Approach

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.

Steps to upgrade

  • Node version set to 18

  • Update react & react-dom to v17

  • Remove node_modules, package-lock. rm -rf node_modules package-lock.json

  • Reinstall and re-build: npm install && npm run build

  • You may need to upgrade other libraries, for example in case of Typescript: npm install @types/react@17.0.0 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

  • Remove node_modules, package-lock. rm -rf node_modules package-lock.json

  • Reinstall and re-build: npm install && npm run build

  • Run unit tests, linting and build scripts if exists.

  • Test extract (pull/push) translations

  • Start & test the project, full regression test and hopefully a good coverage

  • Perform consumer testing if its a library to check its impacts on consumers

  • If its a library and consumers are breaking with React JS upgrade, it should be release as a major version so renovate doesn’t auto merge its changes in consumers.

Roadmap Link

https://github.com/openedx/platform-roadmap/issues/277

 

In case of any help/queries, you can contact us on slack at #tech-fed-bom.