diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx index 58940b765..b5040c52d 100644 --- a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx @@ -357,12 +357,16 @@ export function DataTable( [dataSource, tableState.sorting], ); + const isMounted = useRef(false); useEffect( function triggerSelection() { - onSelect?.( - getSelectedItem(dataSource, tableState.selection), - getSelectedItems(dataSource, tableState.selection), - ); + if (isMounted.current) { + onSelect?.( + getSelectedItem(dataSource, tableState.selection), + getSelectedItems(dataSource, tableState.selection), + ); + } + isMounted.current = true; }, [onSelect, dataSource, tableState.selection], ); diff --git a/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx b/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx index 5ad3712c7..0b45ce42d 100644 --- a/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx @@ -555,10 +555,7 @@ test('onSelect callback fires, and in order', () => { ref.current!.selectItem(2); }); - expect(events.splice(0)).toEqual([ - [undefined, []], - [item3, [item3]], - ]); + expect(events.splice(0)).toEqual([[item3, [item3]]]); act(() => { ref.current!.addRangeToSelection(0, 0); @@ -606,10 +603,7 @@ test('selection always has the latest state', () => { ref.current!.selectItem(2); }); - expect(events.splice(0)).toEqual([ - [undefined, []], - [item3, [item3]], - ]); + expect(events.splice(0)).toEqual([[item3, [item3]]]); const item3updated = { title: 'item 3 updated',