Skip to content

fix(react): DeckGL component avoid overwriting undefined props #10074

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Pessimistress merged 2 commits into from
Mar 10, 2026
Merged

fix(react): DeckGL component avoid overwriting undefined props #10074

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
37f94f7
react component avoid overwriting undefined props
Pessimistress Mar 8, 2026
f9a4091
restore layers fallback
Pessimistress Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion modules/react/src/deckgl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,11 +170,14 @@ function DeckGLWithRef<ViewsT extends ViewOrViews = null>(
parent: containerRef.current,
canvas: canvasRef.current,
layers: jsxProps.layers,
views: jsxProps.views as ViewsT,
onViewStateChange: handleViewStateChange,
onInteractionStateChange: handleInteractionStateChange
};

if (jsxProps.views) {
forwardProps.views = jsxProps.views;
}

// The defaultValue for _customRender is null, which would overwrite the definition
// of _customRender. Remove to avoid frequently redeclaring the method here.
delete forwardProps._customRender;
Expand Down
13 changes: 7 additions & 6 deletions modules/react/src/utils/extract-jsx-layers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {inheritsFrom} from './inherits-from';
import {Layer, View} from '@deck.gl/core';
import {isComponent} from './evaluate-children';
import type {LayersList, Viewport} from '@deck.gl/core';
import type {ViewOrViews} from '../deckgl';

export type DeckGLRenderCallbackArgs = {
/**
Expand Down Expand Up @@ -61,18 +62,18 @@ function wrapInView(node: React.ReactNode | DeckGLRenderCallback): React.ReactNo
}

// extracts any deck.gl layers masquerading as react elements from props.children
export default function extractJSXLayers({
export default function extractJSXLayers<ViewsT extends ViewOrViews>({
children,
layers = [],
views = null
views
}: {
children?: React.ReactNode | DeckGLRenderCallback;
layers?: LayersList;
views?: View | View[] | null;
views?: ViewsT;
}): {
children: React.ReactNode[];
layers: LayersList;
views: View | View[] | null;
views: ViewsT | undefined;
} {
const reactChildren: React.ReactNode[] = []; // extract real react elements (i.e. not deck.gl layers)
const jsxLayers: LayersList = []; // extracted layer from react children, will add to deck.gl layer array
Expand Down Expand Up @@ -111,11 +112,11 @@ export default function extractJSXLayers({
} else if (views) {
jsxViews[views.id] = views;
}
views = Object.values(jsxViews);
views = Object.values(jsxViews) as ViewsT;
}

// Avoid modifying layers array if no JSX layers were found
layers = jsxLayers.length > 0 ? [...jsxLayers, ...layers] : layers;
layers = jsxLayers.length > 0 ? [jsxLayers, layers] : layers;
Comment on lines -118 to +119
Copy link
Copy Markdown
Collaborator

@chrisgervang chrisgervang Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be reverted as well for now?


return {layers, children: reactChildren, views};
}
Expand Down
24 changes: 10 additions & 14 deletions test/modules/react/utils/extract-jsx-layers.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,12 @@ const TEST_CASES = [
},
{
input: {
children: null,
views: null,
layers: null
Copy link
Copy Markdown
Collaborator

@chrisgervang chrisgervang Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer we roll back the layers in the test too until we discuss it more

children: null
},
output: {
children: [],
views: null,
layers: null
views: undefined,
layers: []
},
title: 'empty layers'
},
Expand Down Expand Up @@ -145,7 +143,7 @@ const TEST_CASES = [
output: {
children: [],
views: null,
layers: [lineLayer]
layers: [[lineLayer], []]
},
title: 'JSX layers'
},
Expand All @@ -158,7 +156,7 @@ const TEST_CASES = [
output: {
children: [],
views: null,
layers: [lineLayer, scatterplotLayer]
layers: [[lineLayer], [scatterplotLayer]]
},
title: 'JSX layers with layers prop'
},
Expand All @@ -171,7 +169,7 @@ const TEST_CASES = [
output: {
children: [reactMapView, createElement(View, {}, noop)],
views: [new MapView(reactMapView.props)],
layers: [lineLayer]
layers: [[lineLayer], []]
},
title: 'fragment with single child'
},
Expand All @@ -184,7 +182,7 @@ const TEST_CASES = [
output: {
children: [reactMapView, createElement(View, {}, noop)],
views: [new MapView(reactMapView.props)],
layers: [lineLayer]
layers: [[lineLayer], []]
},
title: 'fragment with statically known children'
},
Expand All @@ -197,20 +195,18 @@ const TEST_CASES = [
output: {
children: [reactMapView, createElement(View, {}, noop)],
views: [new MapView(reactMapView.props)],
layers: [lineLayer]
layers: [[lineLayer], []]
},
title: 'fragment with dynamic children'
},
{
input: {
children: [reactMapView, reactLineLayer, noop],
views: null,
layers: []
children: [reactMapView, reactLineLayer, noop]
},
output: {
children: [reactMapView, createElement(View, {}, noop)],
views: [new MapView(reactMapView.props)],
layers: [lineLayer]
layers: [[lineLayer], []]
},
title: 'mixed children'
}
Expand Down
Loading