getResetPageDeps Causes Multiple Effects

(Using v7.0.0-rc.1)

I’m not sure this qualifies as a bug, but I think it’s surprising behavior.

When using pagination, and changing the sort, this resets the pagination (via getResetPageDeps).

If I have a useEffect that depends on pageIndex and sortBy pulled from the instance state, that effect gets run twice when sortBy changes, once with the current pageIndex, and then again with the reset pageIndex.

I’d argue that this is not what most people want or expect, because the main use-case for this is making an API call. The current behavior results in two API calls, one right after the other. Instead, this should be once state update, with one effect called.

I forked the controlled pagination CodeSandBox to illustrate: fork. As you can see, it logs twice if you’re not on the first page.

Thanks for this wonderful code!

[tannerlinsley]

That does bring up one very good use case: Editable Data. We even have an example for this in the repo already too, where you you have to suppress this automatic behavior when you edit a cell, since the data reference changes, pagination thinks it needs to reset and BAM, you’re in a weird UX state now.

Historically, there were props in React Table like resetPageOnDataChange={false}, but as you can imagine, this is very one-dimensional. With that kind of option, one would assume it’s ONLY tied to data changing and ONLY responsible for resetting the page index.

I guess we could bring something like that back and have it live in the reducer (but not be extensible). Then just instruct users to make their own useEffects for doing custom stuff outside of it (that would still result in a double-action, but hey, it’s custom).

We could even call it autoResetPageIndex, and default it to false. That way it represents the concept as a whole and doesn’t open up too wide as an API.

So you could do something like this:

const [data, setData] = React.useState([])
const skipPageResetRef = React.useRef()

const updateData = newData => {
  // When data gets updated with this function, disable the
  // page from resetting
  skipPageResetRef.current = true

  setData(newData)
}

React.useEffect(() => {
  skipPageResetRef.current = false
})

useTable({
  data,
  autoResetPageIndex: !skipPageResetRef.current,
})

Then additionally, if you wanted to extend or replace the autoReset, you could do this:

import React from 'react'
import { useTable, actions } from 'react-table'

function Table({ data }) {
  const { dispatch } = useTable({
    data,
    autoResetPageIndex: false,
  })

  React.useEffect(() => {
    dispatch({ type: actions.resetPage })
  }, [dispatch, data])
}

Thoughts?

[tannerlinsley]

I think the best thing to do for now is to move forward with the auto-reset side-effects. They may cause multiple rerenders in rapid succession, but for that, I am actually offering a built-in async debouncer hook. You can check out an example here: https://github.com/tannerlinsley/react-table/blob/master/docs/faq.md#how-can-i-debounce-rapid-table-state-changes

As for controlling the auto-reset functionality, all of the getReset___Deps options have been removed in favor of the classic boolean to disable the functionality. More info on that here: https://github.com/tannerlinsley/react-table/blob/master/docs/faq.md#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes

There are a few other changes you may want to note, available in the changelog: https://github.com/tannerlinsley/react-table/blob/master/CHANGELOG.md#700-rc2