Excessive looping on customComponent when populating eyedropper buttons using map

[gundamftw]

I am populating a bunch of eyedropper buttons using array map. Each button has 2 functions, on change, it will grab the rgb value and a value that I passed in. The second function is changing the button background color to the sampled color.

const onChange = fieldName => ({rgb, hex}) => {                
    console.log("I am from onChange");      
}

const Button = ({ onClick, colors }) => {
    console.log("I am from Button");
    return (
        <button className="btn-cls" onClick={onClick} style={{backgroundColor: colors.hex}} />
        )
}

const ButtonList = Object.keys(myItems).map((keyName, index) =>
    <td key={index}>           
        <EyeDropper            
            customComponent={Button}
            onChange={onChange(keyName)}                
            passThrough='colors'
        >
        </EyeDropper>
    </td>
 );

The problem with this is that every time I sampled a color, the Button component will be mapped again for the entire array. If I have like 20 elements in the array, it will run 20 times even though I was only using one eyedropper. In comparison, the function I passed into onChange doesn't have this problem.

[jodhman]

Hmm.. Would you mind posting your code here? Think I know what the issue is.

EDIT: your .map() implementation should suffice.

[jodhman]

I highly suspect that you gave your array of components new key values on each render which will cause every component to re-render. This would then be a problem with your implementation, and not this library. Please re-open this issue if you still believe there's any issues. :-)