Skip to content

Commit

Permalink
Tidy up youtube ref usage
Browse files Browse the repository at this point in the history
  • Loading branch information
@cookpete
cookpete committed Oct 7, 2016
1 parent f9268a8 commit 79b1691
Showing 1 changed file with 2 additions and 5 deletions.
7 changes: 2 additions & 5 deletions src/players/YouTube.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export default class YouTube extends Base {
}
this.loadingSDK = true
this.getSDK().then(YT => {
this.player = new YT.Player(this.refNode, {
this.player = new YT.Player(this.container, {
width: '100%',
height: '100%',
videoId: id,
Expand Down Expand Up @@ -132,17 +132,14 @@ export default class YouTube extends Base {
if (!this.isReady || !this.player.getVideoLoadedFraction) return null
return this.player.getVideoLoadedFraction()
}
setRefNode = (node) => {
this.refNode = node
}
render () {
const style = {
height: '100%',
display: this.props.url ? 'block' : 'none'
}
return (
<div style={style}>
<div ref={this.setRefNode} />
<div ref={container => { this.container = container }} />
</div>
)
}
Expand Down

2 comments on commit 79b1691

@acusti
Copy link

@acusti acusti commented on 79b1691 Oct 7, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Always nice to remove lines of code, but using an anonymous function for props in render() isn’t good for perf. From the jsx-no-bind eslint-plugin-react rule:

A bind call or arrow function in a JSX prop will create a brand new function on every single render. This is bad for performance, as it will result in the garbage collector being invoked way more than is necessary.

Also prevents any shouldComponentUpdate shallowEquals checks from working.

@cookpete
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah good point. I was concerned about this when I saw the new ref callback pattern. What's funny is that this bad practice is used in the official example for ref callbacks.

I am guilty of this in other places so I'll make a note to clean this up.

Please sign in to comment.