{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/5197","labels_url":"https://api.github.com/repos/facebook/react/issues/5197/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/5197/comments","events_url":"https://api.github.com/repos/facebook/react/issues/5197/events","html_url":"https://github.com/facebook/react/issues/5197","id":111886007,"number":5197,"title":"React Performance with bound functions","user":{"login":"ccorcos","id":1794527,"avatar_url":"https://avatars.githubusercontent.com/u/1794527?v=3","gravatar_id":"","url":"https://api.github.com/users/ccorcos","html_url":"https://github.com/ccorcos","followers_url":"https://api.github.com/users/ccorcos/followers","following_url":"https://api.github.com/users/ccorcos/following{/other_user}","gists_url":"https://api.github.com/users/ccorcos/gists{/gist_id}","starred_url":"https://api.github.com/users/ccorcos/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ccorcos/subscriptions","organizations_url":"https://api.github.com/users/ccorcos/orgs","repos_url":"https://api.github.com/users/ccorcos/repos","events_url":"https://api.github.com/users/ccorcos/events{/privacy}","received_events_url":"https://api.github.com/users/ccorcos/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-10-16T18:32:03Z","updated_at":"2015-10-16T18:54:06Z","closed_at":null,"body":"When I'm abstracting a components, I sometimes find it necessary to bind a function to a parameter before passing it to a child component. \r\n\r\nFor example, if I have a list of counters, we want to bind the increment prop to increment the appropriate counter.\r\n\r\n```js\r\ncounts.map((count,i) => {\r\n return <Counter count={count}  inc={this.incCount.bind(this, i)/>\r\n})\r\n```\r\n\r\nThis always returns a new function even though incCount, this, and i are all referentially equal. But every time you bind them, you get a new function. \r\n\r\nIt also wouldnt make sense to entirely rewrite counter to accept incAtIndex and index.\r\n\r\nAnd it seems crazy to create some kind of helper component.\r\n\r\n```js\r\n<BoundFunc f={this.incCount} args={[i]} props={{count}} render={(f, props} => {\r\n  return <Counter {...props} inc={c}/>\r\n}}/>\r\n```\r\n\r\nAnyways, has there been any thought put into this? It would be amazing (and help with performance) if there was some way (perhaps non-native way) that we can accomplish the following, specifially in react\r\n\r\n```js\r\na = f.bind(x,y)\r\nb = f.bind(x,y)\r\na === b\r\n// => true!\r\n```"},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/148805955","html_url":"https://github.com/facebook/react/issues/5197#issuecomment-148805955","issue_url":"https://api.github.com/repos/facebook/react/issues/5197","id":148805955,"user":{"login":"STRML","id":1197375,"avatar_url":"https://avatars.githubusercontent.com/u/1197375?v=3","gravatar_id":"","url":"https://api.github.com/users/STRML","html_url":"https://github.com/STRML","followers_url":"https://api.github.com/users/STRML/followers","following_url":"https://api.github.com/users/STRML/following{/other_user}","gists_url":"https://api.github.com/users/STRML/gists{/gist_id}","starred_url":"https://api.github.com/users/STRML/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/STRML/subscriptions","organizations_url":"https://api.github.com/users/STRML/orgs","repos_url":"https://api.github.com/users/STRML/repos","events_url":"https://api.github.com/users/STRML/events{/privacy}","received_events_url":"https://api.github.com/users/STRML/received_events","type":"User","site_admin":false},"created_at":"2015-10-16T18:54:06Z","updated_at":"2015-10-16T18:54:06Z","body":"@ccorcos I've used a pattern like this to get around the issue:\r\n\r\n```js\r\nclass Counter extends React.Component {\r\n  static propTypes = {\r\n    inc: React.PropTypes.func.isRequired,\r\n    count: React.PropTypes.number.isRequired,\r\n    counterIdx: React.PropTypes.number.isRequired\r\n  }\r\n  onClick(e) {\r\n    this.props.inc(this.props.counterIdx);\r\n  }\r\n  render() {\r\n    return <div onClick={this.onClick}>{this.props.count}</div>\r\n  }\r\n}\r\n```"}}