measureItems causes entire tree to be re-rendered

[Tony Wieser (previously Microsoft Research)]

I'm creating my grid like this:

private render() {
      const Grid = makeResponsive(measureItems(SpringGrid), { maxWidth: 1024, minPadding: 50, defaultColumns: 2 });
      let children = this.props.items.map(i =><li key={i.Id}><ItemCard item={i}  /></li>);
        
      return <div className='items-panel'>
          <Grid component='ul' columnWidth={300} gutterWidth={10} gutterHeight={10} layout={layout.pinterest}>
                    {children}
          </Grid>
      </div>;
}

When I pass in only one item as my items, I'm seeing ItemsCard's constructor being called twice:
Once as a result of being in the elementsToMeasure collection, and then again after a state change when the element has been measured. On that second pass 'cloneElement' adds the itemRect property to the object props, and as a result, the initial object is torn down and removed from the DOM and the new item is added.

Is there any way to make this more efficient so that it doesn't recalcuate, as my ItemCard is quite a large component.

Is there some optimization I need to do in my ItemCard? I attempted to add the lifecycle events for componentWillReceiveProps but it is never called due to cloning.