reactjs - Passing function with bound this causes diffing without needing to render -

class extends react.component {   handleclick() {     console.log("hello other side");   }    render() {    <b onclick={::this.handleclick}/>   } }  class b extends react.component() {   render() {     return <div>useless stuff/>   } } 

when renders b passes handleclick function bound this. causes previousprops.onclick !== nextprops.onclick because binding create new function every time. how prevent this? use "shouldcomponentupdate" there better ways?

instead of binding method inside render method, bind function inside of constructor, this:

class extends react.component {   constructor(props, context) {     super(props, context);     this.handleclick = this.handleclick.bind(this);   }    handleclick() {     console.log("hello other side");   }    render() {    <b onclick={this.handleclick}/>   } }  class b extends react.component() {   render() {     return <div>useless stuff/>   } } 

you use autobind core-decorators so:

import {autobind} "cure-decorators"  @autobind class extends react.component {         handleclick() {     console.log("hello other side");   }    render() {    <b onclick={this.handleclick}/>   } }  class b extends react.component() {   render() {     return <div>useless stuff/>   } } 

if using decorators.