{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/7385","repository_url":"https://api.github.com/repos/facebook/react","labels_url":"https://api.github.com/repos/facebook/react/issues/7385/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/7385/comments","events_url":"https://api.github.com/repos/facebook/react/issues/7385/events","html_url":"https://github.com/facebook/react/issues/7385","id":168525801,"number":7385,"title":"Binding in react","user":{"login":"sandysaders","id":19610736,"avatar_url":"https://avatars.githubusercontent.com/u/19610736?v=3","gravatar_id":"","url":"https://api.github.com/users/sandysaders","html_url":"https://github.com/sandysaders","followers_url":"https://api.github.com/users/sandysaders/followers","following_url":"https://api.github.com/users/sandysaders/following{/other_user}","gists_url":"https://api.github.com/users/sandysaders/gists{/gist_id}","starred_url":"https://api.github.com/users/sandysaders/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sandysaders/subscriptions","organizations_url":"https://api.github.com/users/sandysaders/orgs","repos_url":"https://api.github.com/users/sandysaders/repos","events_url":"https://api.github.com/users/sandysaders/events{/privacy}","received_events_url":"https://api.github.com/users/sandysaders/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":10,"created_at":"2016-07-31T16:27:33Z","updated_at":"2016-08-01T20:08:29Z","closed_at":"2016-08-01T17:25:16Z","body":"I recently read an [article](https://medium.com/@rjun07a/binding-callbacks-in-react-components-9133c0b396c6#.x2t0839fs) on Medium about binding in react. Basically explaining how you should bind functions inside of the constructor of stateful components to prevent unnecessary rerenders in a component. It shows how using arrow function and `.bind` causes function creation on the spot and makes it seem like new props are being received continuously even when it may not. This is bad and prevents optimizations according to the article. So great I know I should bind in constructor but what about binding methods with parameters not just calling them in stateful and stateless components?\r\n\r\nSay theres something like the following:\r\n```js\r\n// Using stateful components\r\n  class Something extends React.Component {\r\n    constructor () {\r\n      super()\r\n      this.doSomething = this.doSomething.bind(this)  \r\n    }\r\n    doSomething (take, take2) {\r\n       return take + take2;\r\n    }\r\n\r\n    render () {\r\n      return (\r\n        <div>\r\n          <button onClick={this.doSomething(5, 6)}>clickMe!</button>\r\n        </div>\r\n      );\r\n    }\r\n  }\r\n\r\n// Using stateless components\r\n  function Something (props) {\r\n\r\n    function doSomething (take, take2) {\r\n       return take + take2;\r\n    }\r\n\r\n    return (\r\n      <div>\r\n       <button onClick={doSomething(5, 6)}>clickMe!</button>\r\n      </div>\r\n    );\r\n  }\r\n```\r\n\r\nIt throws an error because the call evaluates immediately to a number when it should be a function. This makes sense and the only way around this I've been able to go around this is using an arrow function in the `onClick` `() => doSomething(5, 6)` and that will run. But this will cause unnecessary rerenders that the article explained. So how could you do this better and prevent unnecessary rerenders in stateless and stateful components?"},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/236692196","html_url":"https://github.com/facebook/react/issues/7385#issuecomment-236692196","issue_url":"https://api.github.com/repos/facebook/react/issues/7385","id":236692196,"user":{"login":"timche","id":8075074,"avatar_url":"https://avatars.githubusercontent.com/u/8075074?v=3","gravatar_id":"","url":"https://api.github.com/users/timche","html_url":"https://github.com/timche","followers_url":"https://api.github.com/users/timche/followers","following_url":"https://api.github.com/users/timche/following{/other_user}","gists_url":"https://api.github.com/users/timche/gists{/gist_id}","starred_url":"https://api.github.com/users/timche/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/timche/subscriptions","organizations_url":"https://api.github.com/users/timche/orgs","repos_url":"https://api.github.com/users/timche/repos","events_url":"https://api.github.com/users/timche/events{/privacy}","received_events_url":"https://api.github.com/users/timche/received_events","type":"User","site_admin":false},"created_at":"2016-08-01T20:08:28Z","updated_at":"2016-08-01T20:08:28Z","body":"@gaearon, Why not just use the props directly in the function?\r\n\r\n```js\r\n```"}}
{"actor":{"display_login":"timche"}}