diff --git a/examples/editable-data/src/App.js b/examples/editable-data/src/App.js index 805c577..60d315f 100644 --- a/examples/editable-data/src/App.js +++ b/examples/editable-data/src/App.js @@ -230,17 +230,17 @@ function App() { const [data, setData] = React.useState(() => makeData(20)) const [originalData] = React.useState(data) + const [skipPageReset, setSkipPageReset] = React.useState(false) // We need to keep the table from resetting the pageIndex when we // Update data. So we can keep track of that flag with a ref. - const skipPageResetRef = React.useRef(false) // When our cell renderer calls updateMyData, we'll use // the rowIndex, columnID and new value to update the // original data const updateMyData = (rowIndex, columnID, value) => { // We also turn on the flag to not reset the page - skipPageResetRef.current = true + setSkipPageReset(true) setData(old => old.map((row, index) => { if (index === rowIndex) { @@ -258,7 +258,7 @@ function App() { // so that if data actually changes when we're not // editing it, the page is reset React.useEffect(() => { - skipPageResetRef.current = false + setSkipPageReset(false) }, [data]) // Let's add a data resetter/randomizer to help @@ -272,7 +272,7 @@ function App() { columns={columns} data={data} updateMyData={updateMyData} - disablePageResetOnDataChange={skipPageResetRef.current} + disablePageResetOnDataChange={skipPageReset} /> ) diff --git a/src/plugin-hooks/usePagination.js b/src/plugin-hooks/usePagination.js index 7b676db..c944bd7 100755 --- a/src/plugin-hooks/usePagination.js +++ b/src/plugin-hooks/usePagination.js @@ -49,8 +49,15 @@ function useMain(instance) { const isPageIndexMountedRef = React.useRef() + // Bypass any effects from firing when this changes + const disablePageResetOnDataChangeRef = React.useRef() + disablePageResetOnDataChangeRef.current = disablePageResetOnDataChange + safeUseLayoutEffect(() => { - if (isPageIndexMountedRef.current && !disablePageResetOnDataChange) { + if ( + isPageIndexMountedRef.current && + !disablePageResetOnDataChangeRef.current + ) { setState( old => ({ ...old, @@ -60,7 +67,7 @@ function useMain(instance) { ) } isPageIndexMountedRef.current = true - }, [setState, rowDep, filters, groupBy, sortBy, disablePageResetOnDataChange]) + }, [setState, rowDep, filters, groupBy, sortBy]) const pageCount = manualPagination ? userPageCount