Skip to content

[EuiInMemoryTable] getDerivedStateFromProps can incorrectly block updates #3478

@thompsongl

Description

@thompsongl

The getDerivedStateFromProps method is set up with a false prioritization of updates. For instance, if both the items reference and the search reference change, only the items update propagates to new component state simply because the update logic occurs first.

static getDerivedStateFromProps<T>(
nextProps: EuiInMemoryTableProps<T>,
prevState: State<T>
) {
if (nextProps.items !== prevState.prevProps.items) {
// We have new items because an external search has completed, so reset pagination state.
return {
prevProps: {
...prevState.prevProps,
items: nextProps.items,
},
pageIndex: 0,
};
}
const { sortName, sortDirection } = getInitialSorting(
nextProps.columns,
nextProps.sorting
);
if (
sortName !== prevState.prevProps.sortName ||
sortDirection !== prevState.prevProps.sortDirection
) {
return {
sortName,
sortDirection,
};
}
const nextQuery = nextProps.search
? (nextProps.search as EuiSearchBarProps).query
: '';
const prevQuery = prevState.prevProps.search
? (prevState.prevProps.search as EuiSearchBarProps).query
: '';
if (nextQuery !== prevQuery) {
return {
prevProps: {
...prevState.prevProps,
search: nextProps.search,
},
query: getQueryFromSearch(nextProps.search, false),
};
}
return null;
}

Ideal case is to convert EuiInMemoryTable to a functional component and take advantage of hooks. Simpler case is to not return until each update logic check has finished.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions