React-table: Subcomponent unmounts on changing data

[rivertam]

What version of React-Table are you using?

6.7.6

What bug are you experiencing, or what feature are you proposing?

I'm not sure I'd call it a bug, but I have a subcomponent that hosts a form that allows you to change the data server-side. When the client updates, the subcomponent unmounts, which is undesired behavior. I think this can be resolved by manually providing a key to the table's row

Minimal reproduction

https://codesandbox.io/s/zky7m7vl0l

What are the steps to reproduce the issue?

1. Open up a subcomponent
2. Click "upd8"
3. Watch as the subcomponent disappears!

Apologies if this is actually already addressed somewhere... There's a lot of documentation, so I may have missed it. I looked through all of it and didn't see anything I found relevant.

[rivertam]

Looks like freezeWhenExpanded works, but it doesn't really solve my problem because I would actually like the data to update without unmounting the subcomponent.

[wesmelon]

Does something like collapseOnDataChange fix your problem?

[gary-menzel]

I quickly checked your example and collapseOnDataChange={false} does work.

Closing this.

[tommyalvarez]

@gary-menzel This is not working for me in version 6.8.6, collapseOnDataChange={false} is in place on the parent table and as a SubComponent i have a container component that triggers an async fetch that retrieves records from the back-end and changes SubComponent props...

The result is infinit ComponentDidMount calls on the SubComponent which leads me to think that the SubComponent is constantly unmounted and re-mounted. Code:

<CheckboxTable
                  className={classnames('-striped -highlight', { disabled: loading })}
                  columns={columns(props)}
                  collapseOnDataChange={false}
                  collapseOnSortingChange={false}
                  data={records.toArray()}
                  defaultPageSize={10}
                  filterable
                  loading={loading}
                  LoadingComponent={TableLoader}
                  manual
                  NoDataComponent={NoDataComponent}
                  noDataText={loading ? '' : I18n.t('table.no-data', { model: I18n.t('models.product.model_name', { count: 0 }) })}
                  onFilteredChange={debounce(props.onFilteredChange, 700)}
                  onPageChange={props.onPageChange}
                  onPageSizeChange={props.onPageSizeChange}
                  onSortedChange={props.onSortedChange}
                  sorted={sort}
                  SubComponent={row => {
                    const Consumables = ConsumablesContainer(row.original.id)
                    return <Consumables product={row.original} />
                  }}
                  {...paginationConfig(pagination)}
                  {...props.checkboxProps}
                />

SubComponent

class ConsumablesContainer extends Component {
    static propTypes = {
      fetchRecords: PropTypes.func.isRequired,
      loading: PropTypes.bool,
      product: PropTypes.object.isRequired,
      updateRecord: PropTypes.func.isRequired
    }

    static defaultPropTypes = {
      loading: false
    }

    componentDidMount () {
      this.props.fetchRecords(this.props.product.id)
    }

    onUpdateConsumable = (consumableId, values) => {
      return this.props.updateRecord(consumableId, values).then((res) => {
        if (!res.error) {
          toastr.success(I18n.t(`views.consumables.edit.toastr.success.title`))
        } else {
          toastr.error(I18n.t(`views.consumables.edit.toastr.error.title`), I18n.t(`views.consumables.edit.toastr.error.message`))
          throw new SubmissionError(toReduxFormErrors(res.payload.response))
        }
      })
    }

    render () {
      return (
        <Consumables {...this.props}
          onUpdateConsumable={this.onUpdateConsumable} />
      )
    }
  }