Рендеринг таблицы в реакции идет медленно

Question

У меня есть базовая заявка на реагирование и экспресс.То, что я пытаюсь сделать, - это грубость с одной таблицей, для этого я добавил MUI-dataTable, все работает очень хорошо, за исключением того, что приложение работает слишком медленно.Когда я нажимаю на фильтр или поиск, он становится очень медленным, и я не понимаю, почему.Я прилагаю свой код

Приложение React:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import SideBar from './sideBar'
import Table from './table'

class App extends Component {
  state = {
    rows: []
  }

  componentDidMount() {

    fetch("/express")
      .then(r => r.json())
      .then(users => {
        this.setState({rows: users});
      })
  }

  render() {
    return (
      // <SideBar> 
        <Table datos={rows}/> 
      // </SideBar> 



    );
  }
}

export default App;

let rows = [];

const loadingPromise = fetch('/express')
  .then(response => response.json())
  .then(json => {
     rows = json
  })

Приложение Express

const express = require('express');
const app = express();
var mysql      = require('mysql');
const port = process.env.PORT || 5000;

var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '',
  database : 'shells'
});
connection.connect(); 


// console.log that your server is up and running
app.listen(port, () => console.log(`Listening on port ${port}`));

// create a GET route
app.get('/express', (req, res) => {
  // res.send({ saludo: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' });
  connection.query('select * from shell', function(err, rows, fields) {

    res.send(rows);
    console.log(rows)
  });




});

Компонент таблицы React

import React from 'react';
import PropTypes from 'prop-types';
import MUIDataTable from "mui-datatables";


const styles = theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },
  table: {
    minWidth: 700,
  },
});

const columns = ["Familia", "Genero", "Especie", "Calidad","Tamaño","País","Comentario","Precio","habitad"];



function SimpleTable(props) {
  var arr = props.datos.map(dato=>Object.values(dato))
  console.log(arr)
  return (


    <MUIDataTable
      title={"Employee List"}
      data={arr}
      columns={columns}
    />
  );
}

SimpleTable.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default (SimpleTable);