Example of using startTransition in React 18

mweststrate · Jun 22, 2021 · 27be8bd · 27be8bd
1 parent c6433ee
commit 27be8bd
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -39,9 +39,9 @@
     "polished": "^2.3.0",
     "protvista-uniprot": "2.6.1",
     "query-string": "^6.10.1",
-    "react": "^16.14.0",
+    "react": "^18.0.0-alpha-568dc3532",
     "react-beautiful-dnd": "^13.0.0",
-    "react-dom": "^16.14.0",
+    "react-dom": "^18.0.0-alpha-568dc3532",
     "react-gtm-module": "^2.0.11",
     "react-helmet": "^6.0.0",
     "react-measure": "^2.1.2",

diff --git a/src/index.js b/src/index.js
@@ -12,4 +12,5 @@ if (config.googleTagManagerID) {
   TagManager.initialize({ gtmId: config.googleTagManagerID });
 }
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);
diff --git a/src/index.scss b/src/index.scss
@@ -16,6 +16,15 @@ code {
     monospace;
 }
 
+.pending {
+  opacity: 0.7;
+  transition: opacity 0.2s 0.4s linear;
+}
+
+.done {
+  opacity: 1;
+  transition: opacity 0s 0s linear;
+}
 /* Rules for Bibliography abstract highlight */
 [data-entity='TARGET&DISEASE'],
 [data-entity='DISEASE'],

diff --git a/src/pages/TargetPage/ClassicAssociationsBubbles.js b/src/pages/TargetPage/ClassicAssociationsBubbles.js
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useTransition } from 'react';
 import { Grid, Typography, useTheme } from '@material-ui/core';
 import { withContentRect } from 'react-measure';
 import * as d3 from 'd3';
@@ -85,6 +85,7 @@ function ClassicAssociationsBubbles({
   contentRect,
 }) {
   const [minScore, setMinScore] = useState(0.1);
+  const [isPending, startTransition] = useTransition();
   const svgRef = useRef(null);
   const theme = useTheme();
   const assocs = associations.filter(assoc => assoc.score >= minScore);
@@ -105,7 +106,14 @@ function ClassicAssociationsBubbles({
         svgContainer={svgRef}
         filenameStem={`${symbol}-associated-diseases-bubbles`}
       >
-        <Slider value={minScore} onChange={(_, val) => setMinScore(val)} />
+        <Slider
+          defaultValue={minScore}
+          onChange={(_, val) => {
+            startTransition(() => {
+              setMinScore(val);
+            });
+          }}
+        />
         <Grid
           item
           container
@@ -123,6 +131,7 @@ function ClassicAssociationsBubbles({
                 ref={svgRef}
                 height={size}
                 width={size}
+                className={isPending ? 'pending' : 'done'}
               >
                 {root.descendants().map(d => {
                   return (

diff --git a/src/pages/TargetPage/ClassicAssociationsSlider.js b/src/pages/TargetPage/ClassicAssociationsSlider.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useState } from 'react';
 import { Slider, Typography, withStyles } from '@material-ui/core';
 
 import { decimalPlaces } from '../../constants';
@@ -14,27 +15,33 @@ const styles = () => ({
 
 const ClassicAssociationsSlider = ({
   classes,
-  value,
+  defaultValue,
   onChange,
   onChangeCommitted,
-}) => (
-  <div className={classes.root}>
-    <Typography id="label">
-      Minimum Score: {value.toFixed(decimalPlaces)}
-    </Typography>
-    <Slider
-      classes={{
-        root: classes.container,
-      }}
-      defaultValue={value}
-      value={value}
-      step={0.01}
-      min={0}
-      max={1}
-      onChange={onChange}
-      onChangeCommitted={onChangeCommitted}
-    />
-  </div>
-);
+}) => {
+  const [value, setValue] = useState(defaultValue);
+  return (
+    <div className={classes.root}>
+      <Typography id="label">
+        Minimum Score: {value.toFixed(decimalPlaces)}
+      </Typography>
+      <Slider
+        classes={{
+          root: classes.container,
+        }}
+        defaultValue={value}
+        value={value}
+        step={0.01}
+        min={0}
+        max={1}
+        onChange={(e, nextValue) => {
+          setValue(nextValue);
+          onChange(e, nextValue);
+        }}
+        onChangeCommitted={onChangeCommitted}
+      />
+    </div>
+  );
+};
 
 export default withStyles(styles)(ClassicAssociationsSlider);
diff --git a/yarn.lock b/yarn.lock
@@ -14126,16 +14126,6 @@ react-dev-utils@^11.0.3:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-dom@^16.14.0:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
-  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
-
 react-dom@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
@@ -14146,6 +14136,15 @@ react-dom@^16.8.6:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-dom@^18.0.0-alpha-568dc3532:
+  version "18.0.0-alpha-568dc3532"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0-alpha-568dc3532.tgz#b4575d5f7fbdfb83db2c06bee4ab4040f16fb44e"
+  integrity sha512-Q8eeLund7J6r7nrYprr4/4Dr3QtfQ3O8bHtEDc1GDUu3JkKZu5/rTCITvdcHcs0QUKBDlfn/x2mBosRbBkB27A==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "0.21.0-alpha-568dc3532"
+
 react-error-overlay@^6.0.9:
   version "6.0.9"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
@@ -14397,15 +14396,6 @@ react-transition-group@^4.4.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^16.14.0:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-
 react@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
@@ -14415,6 +14405,14 @@ react@^16.8.6:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
+react@^18.0.0-alpha-568dc3532:
+  version "18.0.0-alpha-568dc3532"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0-alpha-568dc3532.tgz#7b66ca7b68f9ee65751211601bfe52541bee33a2"
+  integrity sha512-0mBgt3ILZoV1JQ5bohwI0vfyYxChmmY1u9g7Wg4ObnDci+nGrgtOAxRgyQMGYhV9da7yWgsIVJiKJFVFgVIVdA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -15199,6 +15197,14 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
+[email protected]:
+  version "0.21.0-alpha-568dc3532"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0-alpha-568dc3532.tgz#e7c0c17df9b48f60795b42c4f282c310553b43e1"
+  integrity sha512-FvCPovtnBwPuN37Gw8FiODNoi6VLZb60IuotEyZTv11mTg7nDRIswG6SP3Gep193CHBN6Et8GHt6oVX6yoRUDg==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 scheduler@^0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"