Cause of infinite re-render loop in a class component?

Viewed 60

I'm relatively new to React and trying to understand how this code I'm working with is causing an infinite render loop. I've written an example of the code below that shows the issue. The error message I'm getting is: "Too many re-renders. React limits the number of renders to prevent an infinite loop."

The props being passed to DataTable appear to be causing the issue. When one of the lines is commented out, there isn't any problems. However, when both data and paginationDefaultPage are passed in, there's an infinite loop. data is being passed as a prop to CustomDataTable and in this example the data is just a hardcoded array.

My current understanding is that a re-render should only occur when state is changed, but as far as I can tell, state isn't being changed (the state is initialized in the CustomDataTable constructor but then never changed).

I've posted the code below, but you can also view it here: https://codesandbox.io/s/bitter-fire-g948qi

App.js

import "./styles.css";
import CustomDataTable from "./CustomDataTable";

// Utility function
function convertUnixTimestamp(timestamp) {
  const d = new Date(timestamp);

  const month = d.getMonth().toString().padStart(2, "0");
  const date = d.getDate().toString().padStart(2, "0");

  const hour = d.getUTCHours().toString().padStart(2, "0");
  const minutes = d.getMinutes().toString().padStart(2, "0");
  const seconds = d.getSeconds().toString().padStart(2, "0");

  return `${d.getFullYear()}/${month}/${date} ${hour}:${minutes}:${seconds}`;
}

export default function App() {
  const columns = [
    { name: "Import ID", selector: (row) => row[0], sortable: true },
    {
      name: "Timestamp",
      selector: (row) => convertUnixTimestamp(row[1]),
      sortable: true
    }
  ];

  return (
    <div className="App">
      <CustomDataTable
        columns={columns}
        data={[["239482398492839482", "2022-05-31 16:03"]]}
      />
    </div>
  );
}

CustomDataTable.js

import React from "react";
import DataTable from "react-data-table-component-with-filter";

class CustomDataTable extends React.Component {
  constructor(props) {
    super(props);

    console.log("CustomDataTable constructor");

    this.state = {
      data: props.data,
      filteredItems: props.data,
      filterText: "",
      resetPaginationToggle: false
    };
  }

  render() {
    // Uncommenting data={this.state.filteredItems} and commenting out paginationDefaultPage={this.state.resetPaginationToggle} 
    // prevents the infinite loop and shows the data as expected with no problems

    // Commenting out data={this.state.filteredItems} and leaving paginationDefaultPage= 
    // {this.state.resetPaginationToggle} doesn't cause any problems

    // Uncommenting both lines causes an infinite loop

    return (
      <DataTable
        columns={this.props.columns}
        // data={this.state.filteredItems}
        paginationDefaultPage={this.state.resetPaginationToggle}
        pagination
        persistTableHead
        subHeader
      />
    );
  }
}

export default CustomDataTable;
1 Answers

According to the React Data Table Component docs, the paginationDefaultPage prop is a number type, not a boolean. I think you meant to use the paginationResetDefaultPage prop, which is a boolean type. It appears that the index for paginationDefaultPage begins at 1, and using an invalid property such as false, 0, -1, or "hi" will cause the infinite re-render issue.

As for why this occurs, it is due to the implementation of the DataTable component. Keep in mind that while the state in your component may not be changed, third-party components written in React will have their own state and (possibly not bug-free) implementation as well.

Related