-
-
Notifications
You must be signed in to change notification settings - Fork 6.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reduce wasted renders for column_loading.js #5021
Reduce wasted renders for column_loading.js #5021
Conversation
@@ -3,17 +3,25 @@ import PropTypes from 'prop-types'; | |||
|
|||
import Column from '../../../components/column'; | |||
import ColumnHeader from '../../../components/column_header'; | |||
import ImmutablePureComponent from 'react-immutable-pure-component'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tried React.PureComponent
but for some reason that resulted in more wasted renders than ImmutablePureComponent
.
render() { | ||
let { title, icon } = this.props; | ||
title = title || ''; | ||
icon = icon || ''; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const { title = '', icon = '' } = this.props;
Is it not acceptable in the above writing style?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah...
static propTypes = {
title: PropTypes.oneOfType(PropTypes.node, PropTypes.string),
icon: PropTypes.string,
};
static defaultProps = {
title: '',
icon: '',
};
The above may be better.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done! :)
}; | ||
|
||
render() { | ||
let { title, icon } = this.props; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let
-> const
* Reduce wasted renders for column_loading.js * Use defaultProps
This reduces some wasted time for this component, as shown in this
ReactPerf.printWasted()
before and after:(Scenario: load the local timeline in mobile view.)