Fluentui: DetailsList not rerendering

[rrocham]

Describe the issue:

I'm passing a collection of items as properties to my component that displays them using the DetailsList component. Although I can see that my component is rerendering it seems that the DetailsList does not rerender.

I've tested by adding a simple count to see how many items are in my list before rendering the control... am I missing something?

public render(): JSX.Element{

    return (
        <div className='ms-Component'>
            <div>Count: {this.props.items.length}</div>
            <DetailsList
                items={this.props.items}
                groups={ this.groupBy(this.props.items, this.props.groupByFieldName) }
                columns={ this.columns }
                selection={this.selection} />
        </div>
    );
}

Actual behavior:

Div displays proper count. DetailsList renders a different number of items.

Expected behavior:

DetailsList should be displaying the items I'm passing in.

Thanks

[cschleiden]

Do you create a new array? If you only mutate this.props.items it will not re-render. If you treat the array as immutable it should work.

[rrocham]

From my understanding props in React are immutable by default. What I did to force the trigger was setting the key of my details list. I used my array to generate a key based on the elements in it.

[cschleiden]

DetailsList couldn't/shouldn't modify its properties, but if you modify your array outside and then pass in the same array instance, it's still the same array instance.

[sebasthuis]

How would I go about making the array immutable. Or more specifically, if this.props.items does not trigger a re-render, how would I ensure that it would?

[cschleiden]

instead of

items.push({});

do something like

items = items.concat([{}]);

[nealYangVic]

I think even I pass immutable array to it, when I copy array and change the data inside, detaillist won't auto rerender, I need scroll and see the new data

[KevinTCoughlin]

I think even I pass immutable array to it, when I copy array and change the data inside, detaillist won't auto rerender, I need scroll and see the new data

Passing a new array via items prop should trigger a re-render since List does a referential equality check as noted in https://github.com/OfficeDev/office-ui-fabric-react/pull/8201/files.

@nealYangVic if you're still experiencing problems, can you open a new issue and tag me in it? It would be _most_ helpful to have a Codepen repro'ing the problem or similar so I can debug.

[nealYangVic]

@KevinTCoughlin thanks, I use slice() which is shallow copy, should use deep copy