Skip to content

Commit 06eb9c5

Browse files
gggritsoandrewshie-sentry
authored andcommitted
perf(widget-builder): Prevent unnecessary re-render of DashboardDetail when opening the Widget Builder (#102984)
`DashboardDetail` is the whole dashboard, so it's expensive to re-render. Right now, when the Widget Builder opens it re-renders twice. One of them is legitimate, because the Widget Builder is now open. One of them is because `widgetBuilderSelectionState` was re-calculated, which is not needed. We only need to recalculate the selection state if the URL selection changed. If it did not, skip it, and skip the render. This saves like a 300ms render in some cases. **Before:** <img width="310" height="190" alt="Screenshot 2025-11-07 at 3 37 09 PM" src="https://github.com/user-attachments/assets/490819f5-21a5-4621-91c8-c349377486e1" /> **After:** <img width="313" height="218" alt="Screenshot 2025-11-07 at 3 39 51 PM" src="https://github.com/user-attachments/assets/2b6f455a-7586-494d-af76-20fee4b85170" />
1 parent 83b5a75 commit 06eb9c5

File tree

1 file changed

+7
-2
lines changed

1 file changed

+7
-2
lines changed

static/app/views/dashboards/detail.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -226,8 +226,13 @@ class DashboardDetail extends Component<Props, State> {
226226

227227
if (
228228
prevProps.organization !== this.props.organization ||
229-
prevProps.location !== this.props.location ||
230-
prevProps.router !== this.props.router ||
229+
// The only part of `location` used by `WidgetLegendSelectionState` is
230+
// `unselectedSeries`. Don't bother comparing anything else. Once this
231+
// component is a functional component, we'll move the selection state
232+
// into a hook, and make sure it doesn't re-render too much.
233+
prevProps.location.query.unselectedSeries !==
234+
this.props.location.query.unselectedSeries ||
235+
prevProps.navigate !== this.props.navigate ||
231236
prevProps.dashboard !== this.props.dashboard
232237
) {
233238
this.setState({

0 commit comments

Comments
 (0)