From 6a279beff361c9fd05dee83fa6648a492076006b Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Tue, 1 Feb 2022 08:05:09 +0100
Subject: [PATCH] Adjust QR state/timeout ordering (#607)

* Adjust QR state/timeout ordering

* CHANGELOG
---
 CHANGELOG.md                      | 1 +
 packages/react-qr/src/Display.tsx | 9 ++++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47eecff8..dd5e7a5c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 Changes:
 
+- Adjust ordering in state & timeouts for QR display
 - Adjust webpack example config (cleanups, remove unneeded plugins)
 
 
diff --git a/packages/react-qr/src/Display.tsx b/packages/react-qr/src/Display.tsx
index be3594b8..1e4a45f2 100644
--- a/packages/react-qr/src/Display.tsx
+++ b/packages/react-qr/src/Display.tsx
@@ -69,15 +69,18 @@ function Display ({ className, size, skipEncoding, style, value }: Props): React
         timerRef.current.timerDelay = timerRef.current.timerDelay + TIMER_INC;
       }
 
-      timerRef.current.timerId = setTimeout(nextFrame, timerRef.current.timerDelay);
-
       // only encode the frames on demand, not above as part of the
       // state derivation - in the case of large payloads, this should
       // be slightly more responsive on initial load
-      return objectSpread({}, state, {
+      const newState = objectSpread<FrameState>({}, state, {
         frameIdx,
         image: getDataUrl(state.frames[frameIdx])
       });
+
+      // set the new timer last
+      timerRef.current.timerId = setTimeout(nextFrame, timerRef.current.timerDelay);
+
+      return newState;
     });
 
     timerRef.current.timerId = window.setTimeout(nextFrame, FRAME_DELAY);