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:
parent
663367b0c8
commit
88cd736dec
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue