Use flushsync (#770)

* fix: use flushsync

* 6.9.6

* 6.9.7

* fix

* 6.9.8

Author: bokuweb

package.json

@@ -1,6 +1,6 @@
 {
   "name": "re-resizable",
-  "version": "6.9.6",
+  "version": "6.9.8",
   "description": "Resizable component for React.",
   "title": "re-resizable",
   "main": "./lib/index.es5.js",
@@ -53,7 +53,7 @@
     "@storybook/react": "6.0.28",
     "@types/node": "12.12.70",
     "@types/react": "16.8.7",
-    "@types/react-dom": "16.9.9",
+    "@types/react-dom": "17.0.9",
     "@types/sinon": "9.0.10",
     "avaron": "0.2.0",
     "babel-core": "7.0.0-bridge.0",

src/index.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { flushSync } from 'react-dom';
+
 import { Resizer, Direction } from './resizer';
 import memoize from 'fast-memoize';
 
@@ -854,7 +856,10 @@ export class Resizable extends React.PureComponent<ResizableProps, State> {
       newState.flexBasis = newState.height;
     }
 
-    this.setState(newState);
+    // For v18, update state sync
+    flushSync(() => {
+      this.setState(newState);
+    });
 
     if (this.props.onResize) {
       this.props.onResize(event, direction, this.resizable, delta);
@@ -892,7 +897,7 @@ export class Resizable extends React.PureComponent<ResizableProps, State> {
     if (!enable) {
       return null;
     }
-    const resizers = Object.keys(enable).map(dir => {
+    const resizers = Object.keys(enable).map((dir) => {
       if (enable[dir as Direction] !== false) {
         return (
           <Resizer

yarn.lock

@@ -2446,10 +2446,10 @@
     "@types/react" "*"
     "@types/reactcss" "*"
 
-"@types/react-dom@16.9.9":
-  version "16.9.9"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.9.tgz#d2d0a6f720a0206369ccbefff752ba37b9583136"
-  integrity sha512-jE16FNWO3Logq/Lf+yvEAjKzhpST/Eac8EMd1i4dgZdMczfgqC8EjpxwNgEe3SExHYLliabXDh9DEhhqnlXJhg==
+"@types/react-dom@17.0.9":
+  version "17.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.9.tgz#441a981da9d7be117042e1a6fd3dac4b30f55add"
+  integrity sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg==
   dependencies:
     "@types/react" "*"
 
@@ -6546,9 +6546,9 @@ fast-json-stable-stringify@^2.0.0:
   integrity sha1-1RQsDK7msRifh9OnYREGT4bIu/I=
 
 fast-memoize@^2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.1.tgz#c3519241e80552ce395e1a32dcdde8d1fd680f5d"
-  integrity sha512-xdmw296PCL01tMOXx9mdJSmWY29jQgxyuZdq0rEHMu+Tpe1eOEtCycoG6chzlcrWsNgpZP7oL8RiQr7+G6Bl6g==
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.2.tgz#79e3bb6a4ec867ea40ba0e7146816f6cdce9b57e"
+  integrity sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==
 
 fault@^1.0.2:
   version "1.0.3"