1
votes

I have implemented material-table in my project and its working except API search, where when I search its making many rerender and crashing the app.

I dont understand what the problem is when I search I just exceed rendering number by react, everything else is working fine in the table even the pagination.

Here is my implementation:

<MaterialTable
      options={{
        debounceInterval: 1000,
        search: true,
        padding: "dense",
        headerStyle: {
          backgroundColor: "#fb6340",
          color: "#FFF",
        },
      }}
      title="Recipes"
      columns={[
        { title: "id", field: "_userId" },
        { title: "Name", field: "name" },
      ]}
      data={(query) =>
        new Promise((resolve, reject) => {
          // console.log("QUERY: ", query);
          getRecipes(
            query.search,
            query.pageSize,
            query.page,
            token
          ).then((res) => {
            resolve({
              data: res.recipes,
              page: res.page,
              totalCount: res.totalCount,
            });
          });
        })
      }
    />

and here is the error I get: enter image description here