[Bug] "Cannot update a component while rendering a different component" error in `dataloading` event handler

[alex-kowalczyk]

Description

When there is an event handler hooked to mapRef's dataloading event and this handler calls setState (say, for enabling spinning wheel feedback), the following "Warning"-level exception is dumped:

Warning: Cannot update a component (MyMap) while rendering a different component (Source). To locate the bad setState() call inside Source, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

This seems to be caused by <Source> component calling updateSource during rendering. Maybe this should be an in-effect code instead.

Expected Behavior

Event handlers should allow updating state of other components.

Steps to Reproduce

Minimal example provided here. See "Console" tab for the actual error.

https://codesandbox.io/s/optimistic-monad-dyt59s?file=/src/index.js

Environment

• Framework version: 7.0.20
• Map library: 2.4.0
• Browser: Firefox
• OS: Linux

Logs

Relevant stack trace fragment below.

    setTrue useBoolean.js:4   (*** state setter ***)
    dataloading (*** my event handler ***)
    fire maplibre-gl.js:535
    _fireEvent mapbox.js:488
    fire maplibre-gl.js:539
    fire maplibre-gl.js:539
    fire maplibre-gl.js:539
    _updateWorkerData maplibre-gl.js:15287
    setData maplibre-gl.js:15262
    updateSource source.js:39
    Source source.js:102