findDOMNode is deprecated in StrictMode

[shoxter]

The Table component from the react-virtualized package is throwing a warning:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Grid which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

I'm also not sure if this warning is preventing the content of my table from rendering or not as I haven't figured that out yet.

[Forfold]

I am also running into this issue and I'm not sure why. It doesn't seem related to the documentation I've seen revolving passing registerChild as a ref to my div that's the child of CellMeasurer. My table code looks like the following:

type LogsTableViewProps = {
  data: LogsData[]
}

export default function LogsTableView({ data }: LogsTableViewProps): ReactNode {
  const [cache] = useState(
    new CellMeasurerCache({
      fixedWidth: true,
      minHeight: 35,
    })
  )

  const rowGetter = ({ index }: { index: number }): LogsData => data[index]
  const columnCellRenderer = (cellData: TableCellProps) => {
    const { dataKey, parent, columnIndex, rowIndex } = cellData

    const log = data[rowIndex]
    const content = log[dataKey as keyof typeof log]

    return (
      <CellMeasurer
        cache={cache}
        columnIndex={columnIndex}
        key={dataKey}
        parent={parent}
        rowIndex={rowIndex}
      >
        <div>{content}</div>
      </CellMeasurer>
    )
  }

  return (
    <AutoSizer>
      {({ width, height }: { width: number; height: number }) => (
        <Table
          width={width}
          height={height - 48}
          headerHeight={20}
          headerStyle={{ paddingTop: '2px' }}
          rowHeight={cache.rowHeight}
          rowCount={data.length}
          rowGetter={rowGetter}
          overscanRowCount={20}
        >
          <Column
            label="Date/Time"
            dataKey="time"
            width={250}
            cellRenderer={columnCellRenderer}
          />
          <Column
            label="Message"
            dataKey="message"
            width={1000}
            cellRenderer={columnCellRenderer}
          />
        </Table>
      )}
    </AutoSizer>
  )
}

[CoachRDeveloper]

+1, having the same error in my console. Everything seems to work though.

[rahul-vs]

Is there any way to fix this ?

[jaimemorav]

+1. Having the same problem when use Table with AutoSizer

[beadex]

Still having the problem when using WindowScroller in 9.22.3

[alina-boshkov]

related to issues/1353

[theromis]

Any updates on this issue?

[sonlichao]

It work very well in not use "React.StrictMode" with "react": "^17.0.2". In "React.StrictMode", the warning will cause header and body async in table resizing. It sync by scrolling table.

https://user-images.githubusercontent.com/8370453/121707310-638d0180-cb11-11eb-9ad5-29b04a032033.mov

[varseb]

Hey guys, having the same problem using 9.22.3. Do we have any update of this issue?

[sergeyzwezdin]

As for <Table> — it is not related to AutoSizer, the problem is actually here — https://github.com/bvaughn/react-virtualized/blob/e360d958b99fa965fd3f1caed4506403ad652cd3/source/Table/Table.js#L342

Waiting contributors to fix this - #1353

[karleee]

Has there been any updates on this? I see both the console error and the issue mentioned above where elements don't render. See https://codesandbox.io/s/focused-hugle-mhegpz?file=/src/App.js for an example (there's 100 list items, but only 16 are getting rendered)

[volodymyr-kushchev]

I have the same issue. Any updates?

[Scramjet911]

I solved the error showed in console, though I had no issues with displaying the table even with it. I was using the CellMeasurer along with the List component.

I found the way to fix it by going through the source code, cellMeasurer uses findDomNode() if no child is registered, so we just have to pass the registerChild prop as ref to the child.

eg.

<CellMeasurer
  cache={cache}
  columnIndex={columnIndex}
  key={dataKey}
  parent={parent}
  rowIndex={rowIndex}
>
  {({ registerChild }) => (
    <div ref={registerChild}>{content}</div>
  ))}
</CellMeasurer>

[PerfectionVR]

I solved the error showed in console, though I had no issues with displaying the table even with it. I was using the CellMeasurer along with the List component.

I found the way to fix it by going through the source code, cellMeasurer uses findDomNode() if no child is registered, so we just have to pass the registerChild prop as ref to the child.

eg.

<CellMeasurer
  cache={cache}
  columnIndex={columnIndex}
  key={dataKey}
  parent={parent}
  rowIndex={rowIndex}
>
  {({ registerChild }) => (
    <div ref={registerChild}>{content}</div>
  ))}
</CellMeasurer>

The types for this are incompatilbe when you are using typescript however, which leads me to believe something is wrong?

[mleister97]

@PerfectionVR it's not wrong, the library is justing using really old react dependencies IMO. Did u solve the problem?

[keepitreal]

I opened #1787 to fix this in WindowScroller and Table but I believe the author no longer maintains this lib or monitors PRs.

[trizotti]

I solved the error showed in console, though I had no issues with displaying the table even with it. I was using the CellMeasurer along with the List component.

I found the way to fix it by going through the source code, cellMeasurer uses findDomNode() if no child is registered, so we just have to pass the registerChild prop as ref to the child.

eg.

<CellMeasurer
  cache={cache}
  columnIndex={columnIndex}
  key={dataKey}
  parent={parent}
  rowIndex={rowIndex}
>
  {({ registerChild }) => (
    <div ref={registerChild}>{content}</div>
  ))}
</CellMeasurer>

I tried this - the warning is gone but the list render is super laggy now...

[anasselbaz0]

You can try this, worked for me

<CellMeasurer cache={cache} columnIndex={0} key={key} rowIndex={index} parent={parent}>
        {({ registerChild }) => (
          <div
            style={style}
            ref={(element): void => {
              if (element && registerChild) {
                registerChild(element);
              }
            }}
          >
            // Your content here ...
          </div>
        )}
      </CellMeasurer>