React-virtualized: findDOMNode is deprecated in StrictMode

Created on 3 Aug 2020 · 4Comments · Source: bvaughn/react-virtualized

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.

Source

shoxter

Most helpful comment

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

CoachRDeveloper on 7 Jan 2021

👍6

All 4 comments

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>
  )
}