javascript - PureRenderMixin breaking with bound event handlers -

i'm trying optimize as can react components using purerendermixin , making sure props being passed immutable , don't change render render.

one issue i'm running case of mutating bound event handlers passed props. more specifically, have renders , array of children:

in parent:

onchange: function(key, data) {     ... },  render: function() {         return this.state.array.map(function(object, index) {             return <child key={object.key} onchange={this.onchange.bind(key)} stuff={object.stuff}/>         }     })  } 

in child:

... mixins: [purerendermixin] ... 

it turns out purerendermixin triggers update inside child because onchange prop new instance (even though it's bound same key). is, each call anyfunction.bind(123) generates new value (ie. not ===).

how people deal this? here's 2 ways can think of:

1. pass unbound onchange handler, pass key separately, , have child call onchange key -- bit messy adds unecessary complexity child.

2. cache bound onchange handlers in parent -- adds complexity parent (store them in map? , each handler?)

3. have purerendermixin skip on* props -- breaks when handlers change , passed further down hierarchy in child.

i can't seem find elegant solution this. missing something?

thanks

you can memoize result of bind:

function memoizedbind(fn, context) {   var cache = fn.__memoize_cache;    if (!cache) {     cache = fn.__memoize_cache = {};   }    var key = getkey(context); // if context primitive can `context`    var cachedfn = cache[key];    if (!cachedfn) {     cachedfn = cache[key] = fn.bind(context);   }    return cachedfn; } 

then use memoizedbind instead of bind. return same result of same function , context.