Adopt React concurrent mode

website/jest.common.config.js

@@ -2,7 +2,8 @@ module.exports = {
   roots: ['<rootDir>/src'],
   moduleDirectories: ['node_modules', '<rootDir>/src'],
   moduleFileExtensions: ['jsx', 'js', 'ts', 'tsx'],
-  setupFilesAfterEnv: ['<rootDir>/scripts/test.js'],
+  setupFiles: ['<rootDir>/scripts/jest/setupFiles.js'],
+  setupFilesAfterEnv: ['<rootDir>/scripts/jest/setupFilesAfterEnv.js'],
   moduleNameMapper: {
     // Mock non JS files as strings
     '\\.(?:jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':

website/package.json

@@ -152,9 +152,9 @@
     "no-scroll": "2.1.1",
     "nusmoderator": "3.0.0",
     "query-string": "5.0.0",
-    "react": "17.0.1",
+    "react": "0.0.0-experimental-4ead6b530",
     "react-beautiful-dnd": "13.0.0",
-    "react-dom": "17.0.1",
+    "react-dom": "0.0.0-experimental-4ead6b530",
     "react-feather": "2.0.9",
     "react-helmet": "6.1.0",
     "react-kawaii": "0.17.0",

website/scripts/jest/setupFiles.js

@@ -0,0 +1,10 @@
+// Mock React's internal scheduler so that tests run in Concurrent Mode.
+// Although this is the current recommendation (and is used at Facebook), the
+// recommended approach is likely to change in the future. See:
+// - https://github.com/facebook/react/blob/ce40f1dc2f8e0869ae4b484e7248a449efba64c8/packages/react-reconciler/src/ReactFiberWorkLoop.old.js#L3357-L3363
+// - https://github.com/testing-library/react-testing-library/issues/509#issuecomment-557578615
+//
+// scheduler is a React internal dependency. This is not added as a dev
+// dependency to avoid version desync with the version depended on by React.
+// eslint-disable-next-line import/no-extraneous-dependencies, global-require, no-undef
+jest.mock('scheduler', () => require('scheduler/unstable_mock'));

website/src/entry/main.tsx

@@ -1,3 +1,6 @@
+/// <reference types="react/experimental" />
+/// <reference types="react-dom/experimental" />
+
 // Import Sentry earliest to capture exceptions
 import 'bootstrapping/sentry';
 // core-js has issues with Promise feature detection on Edge, and hence
@@ -6,7 +9,7 @@ import 'bootstrapping/sentry';
 // See: https://github.com/zloirock/core-js/issues/579#issuecomment-504325213
 import 'core-js/es/promise/finally';
 
-import ReactDOM from 'react-dom';
+import { unstable_createRoot as createRoot } from 'react-dom';
 import ReactModal from 'react-modal';
 
 import configureStore from 'bootstrapping/configure-store';
@@ -22,10 +25,15 @@ const { store, persistor } = configureStore();
 
 subscribeOnlineEvents(store);
 
+const root = document.getElementById('app');
+if (!root) {
+  throw new Error('Could not find root #app element!');
+}
+
 // Initialize ReactModal
-ReactModal.setAppElement('#app');
+ReactModal.setAppElement(root);
 
-ReactDOM.render(<App store={store} persistor={persistor} />, document.getElementById('app'));
+createRoot(root).render(<App store={store} persistor={persistor} />);
 
 if (
   (!__DEV__ &&

website/yarn.lock

@@ -9925,14 +9925,14 @@ react-dev-utils@11.0.1:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-dom@17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
-  integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
+react-dom@0.0.0-experimental-4ead6b530:
+  version "0.0.0-experimental-4ead6b530"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-4ead6b530.tgz#6ca831f5aa7ab86f7299b9a2f7b81dffabfa4eb4"
+  integrity sha512-a03ptS8lhhEENNgne6zQMXQWX/Z6WMEBGJQY0laOC0NgJywidePYpgkiE72fUAaj/r7t9a6XsdVyqx4UsEZijg==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    scheduler "^0.20.1"
+    scheduler "0.0.0-experimental-4ead6b530"
 
 react-error-overlay@^6.0.8:
   version "6.0.8"
@@ -10092,10 +10092,10 @@ react-test-renderer@17.0.1, react-test-renderer@^17.0.0:
     react-shallow-renderer "^16.13.1"
     scheduler "^0.20.1"
 
-react@17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
-  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
+react@0.0.0-experimental-4ead6b530:
+  version "0.0.0-experimental-4ead6b530"
+  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-4ead6b530.tgz#88cdae012012a758dd039a63104758c6351115df"
+  integrity sha512-tpbYm6FEuC1L6tCVXIKYAhgGAkS8DShzKpmXosowZvLqeByeLQQe77Ef6bi5HdEkFm2v0lZffLWckSM8R4TToA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -10671,6 +10671,14 @@ saxes@^5.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
+scheduler@0.0.0-experimental-4ead6b530:
+  version "0.0.0-experimental-4ead6b530"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-experimental-4ead6b530.tgz#0dca3287308d34caed0651941f1ce7c9d64a0824"
+  integrity sha512-AzUR6EiDuY32oAnfELgVFPasfovJw4+NtRy7RIam0IUOSgNZKcazqcHzsoW1zDw3AzIBlD1VlRvl5SPJRSlTPg==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 scheduler@^0.20.1:
   version "0.20.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"