V 7.0.0 useExpanded hook: Error: Maximum update depth exceeded

Description: After updating react-table from 7.0.0-rc.16 to 7.0.0, I am getting an error when I try to expand a row Error: Maximum update depth exceeded.

Codesandbox example: https://codesandbox.io/s/lucid-bartik-u56pc

Steps to reproduce the behavior

1. Go to the sandbox
2. Click on 👈in the browser view
3. See error:

Error
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Expected behavior

1. Go to the sandbox
2. Change the version of react-table from the left-side panel to 7.0.0-rc.16
3. Click on 👈in the browser view
4. The sub-component (Expanded row) is rendered properly as expected

Screenshots

[timothymathison]

I had this issue, when I didn’t memoize both columns and data. Memoizing both fixed if for me.

[tannerlinsley]

Quick answer:

I can say with 100% certainty that if you are not memoizing your columns or data, you are not using React Table correctly. Everything in the docs and every example instructs you how to do this (as far as I’m aware). This is required so that React Table can knowingly optimize as much as computationally expensive work as possible for you while rendering the least amount possible.

Long answer:

I agree that a library should handle non-memoized values as best as possible, and React Table does that where possible. You’ll notice that for many values, you don’t have to memoize them even though the docs say too, and you’ll simply be opting out of a ton of performance optimizations. Your app may even run smoothly still in some cases. However, even in your own code, there are situations where you must memoize certain values or functions to avoid stack overflow. For example, it’s easy to see that if you don’t memoize incrementCount below, or set up some kind of condition to call it, you will stack overflow.

const [count, setCount] = React.useState(0)

const incrementCount = () => setCount(old => old + 1)

React.useEffect(() => {
  incrementCount()
}, [incrementCount])

This is in your own code, too, so even without React Table in the equation, you are still susceptible to this issue if you do not program for closures, rerenders, and memoization. When you develop a library like React Table that must be as performant as possible, you must rely on the built in performance mechanisms of the platform and their rules (React’s built-in useMemo and useCallback hooks in this case).

Unfortunately, there is no way to know for certain from within React Table if a value or callback is truly memoized (wow that would be great), and until that happens, it will be a possibility for people to not understand the documentation and/or API and not provide stable values/functions to React Table. At the end of the day, I can’t only do so much to ensure that users aren’t recreating values and functions on every render.

On the bright side, if you truly are sending in stable values to React Table and getting infinite rerenders or stack overflow, then you have absolutely found a bug and I will happily fix it! 😄

With that said, if you are sending in memoized values that you know are only changing when they should and still experiencing this bug, feel free to open a new issue with a codesandbox example demonstrating the issue.