Using react-table with react-modal

Question

I am failing to understand why I can't use react-table with react-modal or react-aria-modal. When I try to display the modal, the component that displays react-table is constantly re-renders, and eventually crashes because of a Maximum update depth error.

I've created a CodeSandbox to illustrate the issue. Is there a way to use both components in the same tree?

The CodeSandbox doesn't show this error for some reason, but in development I also get this error (these stack traces appear to be coming from react-table):

(anonymous function)
/src/hooks/useColumnVisibility.js:207
  204 | 
  205 | useMountedLayoutEffect(() => {
  206 |   if (getAutoResetHiddenColumns()) {
> 207 |     dispatch({ type: actions.resetHiddenColumns })
      | ^  208 |   }
  209 | }, [dispatch, columns])
  210 | 

(anonymous function)
/src/publicUtils.js:153
  150 | 
  151 | safeUseLayoutEffect(() => {
  152 |   if (mountedRef.current) {
> 153 |     fn()
      | ^  154 |   }
  155 |   mountedRef.current = true
  156 |   // eslint-disable-next-line

Answer 1

You need to memoize the options, which react-table mentions in some of its documentation. The options includes the columns, which you are currently not memoizing, so it gets new columns on each render (because columns is defined in the same scope as an array and [] !== []), and then re-renders.

The quickest way to fix it is to wrap your columns data in a React.useMemo;

const columns = React.useMemo(() =>[
    {
      Header: "Example",
      Cell: props => <span>no click</span>
    }
  ], []);