google / google/site-kit-wp

Custom Dimensions tiles re-render on click

Open
#7,786 0 comments 0 reactions 0 assignees View on GitHub
Type: Enhancement
Dominant language
JavaScript
Stars
1.4k
Forks
383
Avg merge
4d 12h
Merged PRs (30d)
80

Description

## Bug Description

There seems to be an issue with re-rendering on custom dimension tiles, particularly when `setValue` is utilized on `CORE_UI`. This was triggered on click away hook in `sideSheetCloseFn` function, details can be seen in [this conversation](https://10up.slack.com/archives/CBKKQEBR9/p1698396027564709)

Despite investigation, I've not pinpointed a direct relation between this UI state value (or UI state in general) and Widget tile rendering. The `why-did-you-render` library was used for insights, revealing the following:

`why-did-you-render` output details

- [Component Re-render] TopRecentTrendingPagesWidget
- Reason: Props object changed but its values remained equal.
- Advice: Consider making the component pure or preventing its parent from re-rendering.
- More Info: [Link](http://bit.ly/wdyr02)
- Previous Props: {widgetSlug: 'kmAnalyticsTopRecentTrendingPages', Widget, WidgetRecoverableModules, WidgetReportZero, WidgetReportError, ...}
- Next Props: {widgetSlug: 'kmAnalyticsTopRecentTrendingPages', Widget, WidgetRecoverableModules, WidgetReportZero, WidgetReportError, ...}

- [Renderer] WithCustomDimensions(TopRecentTrendingPagesWidget)
- Reason: Hook changes detected.
- Specific Hook: useReducer result has changed.
- More Info: [Link](http://bit.ly/wdyr3)
- Previous State: 253
- Next State: 254


The first point suggests a prop is being passed with the same values but is being re-referenced or re-created. I've checked this in the `get-widget-component-props.js` file but didn't find any triggers for such re-rendering. Notably, each `setValue` use in the previously mentioned function prompts a table component re-render. The current [PR](https://github.com/google/site-kit-wp/pull/7785) fixes the issue by preventing unnecessary state update, preventing table item re-renders and enabling links to function properly. While this PR provides a fix, further investigation might be needed to identify any underlying issues.

* Using `memize`, and `useMemo` on widget, or table item component, did not give desired results.
* This re-render is only affecting custom dimensions tiles. Other tiles did not have this problem.
* Even when `WithCustomDimensions` HoC is not used, re-rendering happens
* It is odd that main widget props seems to be re-referenced based on `why-did-you-render` only on custom dimensions tiles, when UI store is updated. As `report` is acquired in the same way as in any other tile, even when mention of custom dimension is removed from options, and everything is hardcoded (dates, date range), lowering the `useSelect` usage, and HoC removed, it will still re-render.

## Steps to reproduce

1. Go to `assets/js/components/KeyMetrics/MetricsSelectionPanel/index.js`
2. Comment out `isOpen` conditional check in `sideSheetCloseFn` callback
3. Add some custom dimension metric tile, and you can put `console.log` in it
4. Click anywhere in the dashboard, tile will be re-rendered, you can confirm it in the console

## Screenshots

## Additional Context

- PHP Version:
- OS: [e.g. iOS]
- Browser: [e.g. chrome, safari]
- Plugin Version: [e.g. 22]
- Device: [e.g. iPhone6]

---------------

_Do not alter or remove anything below. The following sections will be managed by moderators only._

## Acceptance criteria

*

## Implementation Brief

*

### Test Coverage

*

## QA Brief

*

## Changelog entry

*

Contributor guide

Open the contributing guide

Research direction

Start in assets/js/components/KeyMetrics/MetricsSelectionPanel/index.js and inspect sideSheetCloseFn, then review PR 7785 and the reported why-did-you-render output. Reproduce the custom-dimension tile behavior by following the listed steps and compare rendering after clicking away. Done means unnecessary tile re-renders no longer occur and links remain functional.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.