Skip to content
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

Refactor: Play component #36

Open
Jeff-Duke opened this issue Jun 6, 2017 · 0 comments
Open

Refactor: Play component #36

Jeff-Duke opened this issue Jun 6, 2017 · 0 comments
Assignees

Comments

@Jeff-Duke
Copy link
Collaborator

In app/components/Play/Play.js you're binding methods to pass down like so:
<ImageCapture analyzeEmotions={this.analyzeEmotions.bind(this)}
getImageURL={this.getImageURL.bind(this)}

This is considered an anti-pattern and has performance implications. Here's an interesting read if you'd like to know more:
https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f

A couple options are to bind the action in the constructor:

export default class Play extends Component {
  constructor() {
    super()
    this.state = {
      emotions: [],
      canvasURL: ''
    }
    this.analyzeEmotions = this.analyzeEmotions.bind(this)
  }

Or use an arrow function in the class property:

analyzeEmotions = (faceBlob) => {}

Binding in the constructor is supported in ES6 and recommended by React. Using an arrow function in the class property is also recommended by React, but not supported in ES6, it's part of ES7 standard. As such you'll need to modify your .babelrc to include stage-2 presets.

Some more reading/info:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants