Custom Dimensions tiles re-render on click
- 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
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