Mark `PagerankTable` components as pure (#485)

Summary:
As we add sliders for adjusting the PageRank parameters, we trigger a
bunch of unneeded renders on `PagerankTable`. As `PagerankTable` is a
pure component, we can [mark it and its children as such][1] to see notable
performance improvements: the `Array.from` and `sort` in its `render`
method are showing up on the flamegraph.

[1]: https://reactjs.org/docs/react-api.html#reactpurecomponent

Paired with @decentralion.

Test Plan:
Unit tests pass, whereas if we instead implement `shouldComponentUpdate`
by `return false` then the interaction tests fail. Also, `yarn start`
seems to behave as expected as we switch among different graphs.

wchargin-branch: pure-pageranktable
This commit is contained in:
William Chargin 2018-07-04 17:26:43 -07:00 committed by GitHub
parent 663367b0c8
commit 88cd736dec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 3 deletions

View File

@ -48,7 +48,7 @@ export function nodeDescription(
} }
} }
export class PagerankTable extends React.Component<Props, State> { export class PagerankTable extends React.PureComponent<Props, State> {
constructor() { constructor() {
super(); super();
this.state = {topLevelFilter: NodeAddress.empty}; this.state = {topLevelFilter: NodeAddress.empty};
@ -152,7 +152,7 @@ type RTProps = {|
+adapters: $ReadOnlyArray<PluginAdapter>, +adapters: $ReadOnlyArray<PluginAdapter>,
|}; |};
class RecursiveTable extends React.Component<RTProps, RTState> { class RecursiveTable extends React.PureComponent<RTProps, RTState> {
constructor() { constructor() {
super(); super();
this.state = {expanded: false}; this.state = {expanded: false};
@ -221,7 +221,7 @@ type RecursiveTablesProps = {|
+adapters: $ReadOnlyArray<PluginAdapter>, +adapters: $ReadOnlyArray<PluginAdapter>,
|}; |};
class RecursiveTables extends React.Component<RecursiveTablesProps> { class RecursiveTables extends React.PureComponent<RecursiveTablesProps> {
render() { render() {
const {addresses, graph, pagerankResult, depth, adapters} = this.props; const {addresses, graph, pagerankResult, depth, adapters} = this.props;
return addresses return addresses