influxdata / influxdata/ui

Epic: Dashboard Performance

Open
#4,032 0 comments 1 reaction 0 assignees View on GitHub
epic team/automation team/dumplings team/ui
Dominant language
TypeScript
Stars
117
Forks
51
Avg merge
2d 15h
Merged PRs (30d)
4

Description

Make components Pure or Memorize them
Background
Components can often needlessly re-render when receiving the same props due to how react does comparisons between previous props and next props. Making class components PureComponent or wrapping function components in React.Memo can solve this problem for components that re-render frequently but have props that don't change Frequently

Potential Components:
NavHeader
InnerView (inside visualization/components/View.tsx)

----

Handle Unnecessary Prop Changes

Background
Components can rerender unnecessarily when they are passed the same props but React computes them to be different due to how react computes prop changes. The majority of the components in the app that re-render are called but unnecessary prop changes. These might be caused by things like using anonymous functions, or by creating a new style object in a render loop. See [this explanation](https://medium.com/welldone-software/why-did-you-render-mr-big-pure-react-component-part-2-common-fixing-scenarios-667bfdec2e0f) from the WhyDidYouRender library.

Components to investigate
OverlayController
TypeAheadDropDown
DashboardRoute
TimeRangeDropdown

----

Related to unnecessary re-renders
In case this is helpful, here's how I solved a similar issue in notebooks & data explorer in regards to the functions panel: https://github.com/influxdata/ui/pull/1959.

----

"Create a query. Go on!" rendered while waiting to render a dashboard on a slow machine

Steps to reproduce:
List the minimal actions needed to reproduce the behavior.

macos + chrome
very heavily loaded laptop
refresh an existing dashboard
Expected behavior:

See a dashboard or at least see a spinner or an error message.

Actual behavior:

Create a query. Go on!
![image](https://user-images.githubusercontent.com/98195941/157113400-53ded27a-a4e1-40a5-a9a6-9c89c2e6c5b1.png)

After a while when the browser manages to get some CPU cycles it finally renders the dashboard.

Environment info:

System info: Darwin 20.6.0 x86_64
InfluxDB version: us-west1-1.gcp.cloud2.influxdata.com

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.