Map flickers on transition when viewState is stored in Redux

Description

My problem: https://imgur.com/a/haBPnKB

When putting my viewState in Redux - and starting any kind of transition, I get a clear flicker, where the map will start moving, then return back to its starting position, before continuing the movement. I sometimes also get a warning like the one below when this happens:

[Violation] 'requestAnimationFrame' handler took 103ms

If this is some kind of a race condition, it is a very consistent one. The violation for requestAnimationFrame only happens sometimes.

Neither of these problems exist when I store the viewState in a “useState”-hook instead of Redux.

Repro Steps

CodeSandbox: https://codesandbox.io/s/inspiring-cohen-li1zy

• Click the map, and hold the + key for some intense flickering.

Environment (please complete the following information):

• Framework Version: [deck.gl 8.1.3]
• Browser Version: [ Chrome 80.0.3987.149 (Official Build) (64-bit), Chrome 80.0.3987.163 (Official Build) (64-bit) ]
• OS: [Manjaro Linux, Windows 10]

Logs

Whenever the onViewStateChange-event fires, I log out the current viewState, and the next one like this:

<DeckGL
  layers={[]}
  viewState={viewState}
  controller={MapController}
  onViewStateChange={e => {
    console.table([viewState, e.viewState])
    setViewState(e.viewState)
  }}
>
  <StaticMap reuseMaps mapStyle={mapStyle} />
</DeckGL>

useState (everything works as expected)

Redux (notice the extra row of output)

[Pessimistress]

Fix is included in 8.5.0-alpha.2.

[Pessimistress]

That’s actually great to know, thank you for digging into it. 8.5.0-alpha rewrote the DeckGL class component with function and hooks. I’ll make sure it works in strict mode.