fix: safari batched update bug

a11rew · May 11, 2024 · 6c21dfe · 6c21dfe
1 parent 0cbeb83
commit 6c21dfe
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/examples/storefront/package.json b/examples/storefront/package.json
@@ -58,6 +58,7 @@
     "@types/lodash": "^4.14.195",
     "@types/node": "17.0.21",
     "@types/react": "17.0.40",
+    "@types/react-dom": "^18.2.0",
     "@types/react-instantsearch-dom": "^6.12.3",
     "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",

diff --git a/examples/storefront/src/modules/checkout/components/shipping/index.tsx b/examples/storefront/src/modules/checkout/components/shipping/index.tsx
@@ -9,6 +9,7 @@ import Radio from "@modules/common/components/radio"
 import { ErrorMessage } from "@hookform/error-message"
 import { formatAmount, useCart, useCartShippingOptions } from "medusa-react"
 import { useEffect, useMemo, useState } from "react"
+import { flushSync } from "react-dom"
 import { Cart } from "@medusajs/medusa"
 
 type ShippingOption = {
@@ -67,9 +68,15 @@ const Shipping: React.FC<ShippingProps> = ({ cart }) => {
       { option_id: soId },
       {
         onSuccess: ({ cart }) => {
-          setCart(cart)
-          close()
-          openPayment()
+          // React 18 bug with state update batching inside event handlers (submitShippingOption is called from a click event)
+          // will cause these state updates to not be applied
+          // flushSync forces a sync update
+          // https://github.com/facebook/react/issues/26227
+          flushSync(() => {
+            setCart(cart)
+            close()
+            openPayment()
+          })
         },
         onError: () =>
           setError(

diff --git a/examples/storefront/yarn.lock b/examples/storefront/yarn.lock
@@ -2074,6 +2074,13 @@
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.8.tgz#f2a7de3c107b89b441e071d5472e6b726b4adf45"
   integrity sha512-u95svzDlTysU5xecFNTgfFG5RUWu1A9P0VzgpcIiGZA9iraHOdSzcxMxQ55DyeRaGCSxQi7LxXDI4rzq/MYfdg==
 
+"@types/react-dom@^18.2.0":
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
+  integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-instantsearch-core@*":
   version "6.26.4"
   resolved "https://registry.yarnpkg.com/@types/react-instantsearch-core/-/react-instantsearch-core-6.26.4.tgz#63581cb0e1baced6656815844ef44a605c8beab7"