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() {
|
||||
super();
|
||||
this.state = {topLevelFilter: NodeAddress.empty};
|
||||
|
@ -152,7 +152,7 @@ type RTProps = {|
|
|||
+adapters: $ReadOnlyArray<PluginAdapter>,
|
||||
|};
|
||||
|
||||
class RecursiveTable extends React.Component<RTProps, RTState> {
|
||||
class RecursiveTable extends React.PureComponent<RTProps, RTState> {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {expanded: false};
|
||||
|
@ -221,7 +221,7 @@ type RecursiveTablesProps = {|
|
|||
+adapters: $ReadOnlyArray<PluginAdapter>,
|
||||
|};
|
||||
|
||||
class RecursiveTables extends React.Component<RecursiveTablesProps> {
|
||||
class RecursiveTables extends React.PureComponent<RecursiveTablesProps> {
|
||||
render() {
|
||||
const {addresses, graph, pagerankResult, depth, adapters} = this.props;
|
||||
return addresses
|
||||
|
|
Loading…
Reference in New Issue