State does not update after inspecting data in dev tools

[caboddie1]

Describe the bug

This could potentially be an issue with React Dev tools however, I am unable to replicate it with any other react code.

After opening React Dev Tools and inspecting props/data I am unable to change pages or toggle sorting on any of my table components. It seems to freeze the component.

Your minimal, reproducible example

https://codesandbox.io/s/github/tanstack/table/tree/main/examples/react/pagination?from-embed

Steps to reproduce

I was unable to replicate within code sandbox as the code you write is created within an iframe if I'm not mistaken?

1. Copy the pagination example into a new typescript react project with create react app.
2. Navigate between pages using the arrows.
3. Open the React dev tools and inspect the component.
4. Try to navigate between pages again - it usually freezes at this point.

Have tried in Chrome, Edge and Firefox.

Expected behavior

I expect to be able to inspect data/props in the dev tools to see how it changes with different interactions.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

screen-capture (1).webm

react-table version

8.5.2

TypeScript version

4.4.3

Additional context

No response

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[CaptainObi]

I've also had this issue. For me it seems to freeze whenever I try to use a useState hook or one of my zustand actions on a row click.

[kasparsuvi1]

It's really annoying problem. And it is quite difficult to get to the root of the problem. Because all of the other code is running and working, only react state dispatches are not run.

So if u have something like that with react devtools open

  const rowSelectionChange = (data: Updater<RowSelectionState>): void => {
    if (typeof data === 'function') {
      console.log(rowSelection) // console.logs default rowSelection
      const newRowSelection = data(rowSelection);
      console.log(newRowSelection) // console.logs calculated rowSelection
      setRowSelection(newRowSelection); // Does not update the state
      console.log(newRowSelection) // console.logs calculated rowSelection
      // setRowSelection({ 1: true, 2: true }); // if uncommented will be called and set to state!
    }
  };

Same problem occurs with (onSortingChange, onPaginationChange, onExpandedChange). Hoping that it helps someone to google the problem...

[martavis]

Hi all. I spent many hours trying to figure out why my table wasn't sorting or paginating, and closing the dev tools worked. My example was attempting to do basic sorting like this:

const [sorting, setSorting] = useState<SortingState>([{ id: "username", desc: false }]);

const usersTable = useReactTable({
  data,
  columns,
  state: { sorting },
  onSortingChange: setSorting,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
});

And the table didn't sort while the React Devtools extension was enabled. Does anyone know why this is an issue or how to fix it? So far, I see a possible connection in React's issues: https://github.com/facebook/react/issues/16891

[kboul]

same problem here. state freezes when using react dev tools

[ppaul]

same issue; I have a plugin that puts a checkAll checkbox in header and need to verify and extend some behavior.