[Bug]keep updating GeoJsonLayer 20 times, the CPU will reach 100% about deck.gl HOT 10 CLOSED

Please provide a functional code snippet and dataset that reproduces your issue.

from deck.gl.

I'm sorry.
The drawings are confidential and cannot be made public.
The source for generating and updating GeoJsonLayer is as follows.

// Generating GeoJsonLayer
const drawing = new GeoJsonLayer({
    id: 'drawing',
    data: selectedDrawing.value,
    bounds: selectedDrawingBounds.value,
    coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
    target: [0, 0, 0],
    getLineColor: [128, 128, 128],
    stroked: true,
    filled: false,
    pickable: false
  })

// Update Layer
layers.value = renderLayers()
  deckgl.value.setProps({
    initialViewState: getViewState(),
    layers: layers.value
  })

from deck.gl.

Your bug report states that the steps to reproduce is simply "keep updating GeoJsonLayer 20 times." If that is true, then you should be able to reproduce the issue with ANY GeoJSON. If you cannot reproduce it with a public dataset, then the issue is specific to your own data.

As you can see we have over 100 bugs open right now. Any work you do to help us confirm the bug will get your issues resolved faster.

from deck.gl.

I’ll create a sample using a large-sized GeoJson that is publicly available, so please give me some time.

from deck.gl.

I don't know what the layers,value/deckgl.value are in your code, but it looks like you are using deck.gl with some framework or state management library. Some of these things, like Vue, are known to recursively modify bound data props, in which case it's not surprising that you are getting problems with a large nested object such as GeoJSON. I highly recommend you use the Chrome profiler to find out what function is using that CPU time before rushing to conclusions.

from deck.gl.

As you said, I'm using Vue 3.

from deck.gl.

This is a known problem for Vue in general. Putting a large complex object into the reactivity system is expensive and unnecessary.

markRaw

Some values simply should not be made reactive, for example a complex 3rd party class instance, or a Vue component object.

from deck.gl.

Closing this issue unless reproduceable in standalone deck.gl.

from deck.gl.

There was a slight improvement by changing ref to shallowRef, so it may not be a problem with Deck.gl. We will close it.

from deck.gl.

Thanks!

from deck.gl.