Got error about updating during existing state transition

[Jamie5]

In InteractiveMap, the onLoad event seems to call setState, which is usually fine, except when the load event is fired during a render. So far this reproduces reliable within a synchronous browser-based unit test environment, but it is probably nondeterministic enough to not be easy to reproduce in actual usage. Nevertheless, looking at the error and stack trace (which are included below), there doesn't seem to be anything which prevents this from happening in the wild.

Throwing a setTimeout around the onLoad handler works to get rid of the error, but is probably not the best solution.

This seems similar to #872 in terms of what's going on (a render leads to an event which then leads to a setState call).

In this case, it seems during render of StaticMap we call _renderOverlays which leads to setting the size, and hence calling mapbox-gl redraw, which notices that the map became loaded but we haven't fired the load event, and so fires it. This calls InteractiveMap onLoad which calls setState, hence leading to the problem.

Error message

Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
    in AutoSizer (created by StaticMap)
    in div (created by StaticMap)
    in StaticMap (created by InteractiveMap)
    in div (created by InteractiveMap)
    in InteractiveMap (at <censored>)
    <censored>

Stack trace

method context.js:265
    spiedMethod jasmineSetup.js:86
    React 6
        printWarning
        error
        warnAboutRenderPhaseUpdatesInDEV
        scheduleUpdateOnFiber
        enqueueSetState
        setState
    InteractiveMap interactive-map.js:200
    fire mapbox-gl.js:1499
    _render mapbox-gl.js:42546
    redraw mapbox.js:156
    _update mapbox.js:318
    setProps mapbox.js:133
    _updateMapProps static-map.js:187
    _updateMapSize static-map.js:165
    _renderOverlays static-map.js:227
    render index.esm.js:387
    React 15
        finishClassComponent
        updateClassComponent
        beginWork
        beginWork$1
        performUnitOfWork
        workLoopSync
        performSyncWorkOnRoot
        flushSyncCallbackQueueImpl
        unstable_runWithPriority
        runWithPriority$1
        flushSyncCallbackQueueImpl
        flushSyncCallbackQueue
        unbatchedUpdates
        legacyRenderSubtreeIntoContainer
        render
    renderComponent setup.js:77
    <anonymous> Foo-test.tsx:218
    attempt jasmine.js:6365
    run jasmine.js:6406
    runNext jasmine.js:6325
    next jasmine.js:6332
    once jasmine.js:6226
    run jasmine.js:6422
    onmessage jasmine.js:2712

Tested with v5.2.7, mapbox-gl 1.8.1.

[Jamie5]

Please let me know if I can provide further information.

With some guidance perhaps I could try to address the issue via a PR as well.

[Pessimistress]

This is fixed in 6.1.0-alpha. Will be part of 5.3.0 and 6.1.0.