title: React + Material UI Table pagination not showing correctly
body: <h1>Material UI Table not showing correctly when changing page</h1>
  
  <p>By receiving an array of Artist Objects through props I want to have a checklist table. Everything seems to work, however when changing page/sorting, more than "rowsPerPage" rows are shown. Also this effect duplicates when switching back and forth.</p>
  
  <p>An artist Object: {id: number, name: string, email: string, checked: boolean}</p>
  
  <p>example of props.values.artists: [{id: 1, name: "Tester", email: "mail", checked: false}, {id: 1, name: "bob", email: "test@live.com", checked: false}]</p>
  
  <p>sorry that the code isn't very runnable!</p>
  
  <p>here is the example I used from material: <a href="https://material-ui.com/components/tables/" rel="nofollow noreferrer">https://material-ui.com/components/tables/</a></p>
  
  <pre><code>import React, { useEffect } from "react";
  import clsx from "clsx";
  import {
    createStyles,
    lighten,
    makeStyles,
    Theme
  } from "@material-ui/core/styles";
  import Table from "@material-ui/core/Table";
  import TableBody from "@material-ui/core/TableBody";
  import TableCell from "@material-ui/core/TableCell";
  import TableContainer from "@material-ui/core/TableContainer";
  import TableHead from "@material-ui/core/TableHead";
  import TablePagination from "@material-ui/core/TablePagination";
  import TableRow from "@material-ui/core/TableRow";
  import TableSortLabel from "@material-ui/core/TableSortLabel";
  import Toolbar from "@material-ui/core/Toolbar";
  import Typography from "@material-ui/core/Typography";
  import Paper from "@material-ui/core/Paper";
  import Checkbox from "@material-ui/core/Checkbox";
  
  /*function createData(id: number, name: string, email: string, checked: boolean) {
    return { id, name, email, checked };
  }*/
  
  function desc(a: any, b: any, orderBy: any) {
    if (b[orderBy] &lt; a[orderBy]) {
      return -1;
    }
    if (b[orderBy] &gt; a[orderBy]) {
      return 1;
    }
    return 0;
  }
  
  function stableSort&lt;T&gt;(array: Object[], cmp: (a: T, b: T) =&gt; number) {
    const stabilizedThis = array.map((el, index) =&gt; [el, index] as [T, number]);
    stabilizedThis.sort((a, b) =&gt; {
      const order = cmp(a[0], b[0]);
      if (order !== 0) return order;
      return a[1] - b[1];
    });
    return stabilizedThis.map(el =&gt; el[0]);
  }
  
  type Order = "asc" | "desc";
  
  function getSorting&lt;K extends keyof any&gt;(
    order: Order,
    orderBy: K
  ): (a: { [key in K]: any }, b: { [key in K]: any }) =&gt; number {
    return order === "desc"
      ? (a, b) =&gt; desc(a, b, orderBy)
      : (a, b) =&gt; -desc(a, b, orderBy);
  }
  
  interface HeadCell {
    disablePadding: boolean;
    id: any;
    label: string;
    numeric: boolean;
  }
  
  const headCells: HeadCell[] = [
    {
      id: "name",
      numeric: false,
      disablePadding: true,
      label: "Artists"
    },
    {
      id: "email",
      numeric: true,
      disablePadding: false,
      label: "Email"
    }
  ];
  
  interface EnhancedTableProps {
    classes: ReturnType&lt;typeof useStyles&gt;;
    numSelected: number;
    onRequestSort: (event: React.MouseEvent&lt;unknown&gt;, property: any) =&gt; void;
    onSelectAllClick: (
      event: React.ChangeEvent&lt;HTMLInputElement&gt;,
      checked: boolean
    ) =&gt; void;
    order: Order;
    orderBy: string;
    rowCount: number;
  }
  
  function EnhancedTableHead(props: EnhancedTableProps) {
    const {
      classes,
      onSelectAllClick,
      order,
      orderBy,
      numSelected,
      rowCount,
      onRequestSort
    } = props;
    const createSortHandler = (property: any) =&gt; (
      event: React.MouseEvent&lt;unknown&gt;
    ) =&gt; {
      onRequestSort(event, property);
    };
  
    return (
      &lt;TableHead&gt;
        &lt;TableRow&gt;
          &lt;TableCell padding="checkbox"&gt;
            &lt;Checkbox
              indeterminate={numSelected &gt; 0 &amp;&amp; numSelected &lt; rowCount}
              checked={numSelected === rowCount}
              onChange={onSelectAllClick}
              inputProps={{ "aria-label": "select all desserts" }}
            /&gt;
          &lt;/TableCell&gt;
          {headCells.map(headCell =&gt; (
            &lt;TableCell
              key={headCell.id}
              align={headCell.numeric ? "right" : "left"}
              padding={headCell.disablePadding ? "none" : "default"}
              sortDirection={orderBy === headCell.id ? order : false}
            &gt;
              &lt;TableSortLabel
                active={orderBy === headCell.id}
                direction={orderBy === headCell.id ? order : "asc"}
                onClick={createSortHandler(headCell.id)}
              &gt;
                {headCell.label}
                {orderBy === headCell.id ? (
                  &lt;span className={classes.visuallyHidden}&gt;
                    {order === "desc" ? "sorted descending" : "sorted ascending"}
                  &lt;/span&gt;
                ) : null}
              &lt;/TableSortLabel&gt;
            &lt;/TableCell&gt;
          ))}
        &lt;/TableRow&gt;
      &lt;/TableHead&gt;
    );
  }
  
  const useToolbarStyles = makeStyles((theme: Theme) =&gt;
    createStyles({
      root: {
        paddingLeft: theme.spacing(2),
        paddingRight: theme.spacing(1)
      },
      highlight:
        theme.palette.type === "light"
          ? {
              color: theme.palette.secondary.main,
              backgroundColor: lighten(theme.palette.secondary.light, 0.85)
            }
          : {
              color: theme.palette.text.primary,
              backgroundColor: theme.palette.secondary.dark
            },
      title: {
        flex: "1 1 100%"
      }
    })
  );
  
  interface EnhancedTableToolbarProps {
    numSelected: number;
  }
  
  const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) =&gt; {
    const classes = useToolbarStyles();
    const { numSelected } = props;
  
    return (
      &lt;Toolbar
        className={clsx(classes.root, {
          [classes.highlight]: numSelected &gt; 0
        })}
      &gt;
        {numSelected &gt; 0 ? (
          &lt;Typography
            className={classes.title}
            color="inherit"
            variant="subtitle1"
          &gt;
            {numSelected} artists selected
          &lt;/Typography&gt;
        ) : (
          &lt;Typography className={classes.title} variant="h6" id="tableTitle"&gt;
            Choose artists
          &lt;/Typography&gt;
        )}
      &lt;/Toolbar&gt;
    );
  };
  
  const useStyles = makeStyles((theme: Theme) =&gt;
    createStyles({
      root: {
        width: "100%"
      },
      paper: {
        width: "100%",
        marginBottom: theme.spacing(2)
      },
      table: {
        minWidth: 750
      },
      visuallyHidden: {
        border: 0,
        clip: "rect(0 0 0 0)",
        height: 1,
        margin: -1,
        overflow: "hidden",
        padding: 0,
        position: "absolute",
        top: 20,
        width: 1
      }
    })
  );
  
  export default (props: any) =&gt; {
    const classes = useStyles();
    const [order, setOrder] = React.useState&lt;Order&gt;("asc");
    const [orderBy, setOrderBy] = React.useState&lt;any&gt;("name");
    //const [selected, setSelected] = React.useState&lt;string[]&gt;([]);
    const [page, setPage] = React.useState(0);
    const [rowsPerPage, setRowsPerPage] = React.useState(5);
  
    const handleRequestSort = (
      event: React.MouseEvent&lt;unknown&gt;,
      property: any
    ) =&gt; {
      const isAsc = orderBy === property &amp;&amp; order === "asc";
      setOrder(isAsc ? "desc" : "asc");
      setOrderBy(property);
    };
  
    const handleSelectAllClick = (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
      if (event.target.checked) {
        console.log("merker alle");
        props.values.artists.map((artist: any) =&gt; {
          artist.checked = true;
        });
        props.handleChange(props.values.artists, "artists");
      } else {
        console.log("umerker alle");
        props.values.artists.map((artist: any) =&gt; {
          artist.checked = false;
        });
        props.handleChange(props.values.artists, "artists");
      }
    };
  
    const handleClick = (event: React.MouseEvent&lt;unknown&gt;, id: number) =&gt; {
      var prevStatus: boolean = props.values.artists.find(
        (artist: any) =&gt; artist.id === id
      ).checked;
      props.values.artists.find(
        (artist: any) =&gt; artist.id === id
      ).checked = !prevStatus;
      props.handleChange(props.values.artists, "artists");
    };
  
    const handleChangePage = (event: unknown, newPage: number) =&gt; {
      setPage(newPage);
      console.log("tomme sider" + emptyRows);
      console.log("rader per side" + rowsPerPage);
      console.log("sidenr " + page);
      console.log("artist " + props.values.artists);
    };
  
    const handleChangeRowsPerPage = (
      event: React.ChangeEvent&lt;HTMLInputElement&gt;
    ) =&gt; {
      setRowsPerPage(parseInt(event.target.value, 10));
      setPage(0);
    };
  
    const emptyRows =
      rowsPerPage -
      Math.min(rowsPerPage, props.values.artists.length - page * rowsPerPage);
  
    let amtSelected = props.values.artists.filter(function(artist: any) {
      return artist.checked === true;
    }).length;
  
    useEffect(() =&gt; {
      console.log("useEff");
      props.handleChange(props.values.artists, "artists");
    }, [page]);
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;Paper className={classes.paper}&gt;
          &lt;EnhancedTableToolbar numSelected={amtSelected} /&gt;
          &lt;TableContainer&gt;
            &lt;Table
              className={classes.table}
              aria-labelledby="tableTitle"
              aria-label="enhanced table"
            &gt;
              &lt;EnhancedTableHead
                classes={classes}
                numSelected={amtSelected}
                order={order}
                orderBy={orderBy}
                onSelectAllClick={handleSelectAllClick}
                onRequestSort={handleRequestSort}
                rowCount={props.values.artists.length}
              /&gt;
              &lt;TableBody&gt;
                {stableSort(props.values.artists, getSorting(order, orderBy))
                  .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                  .map((row: any, index: number) =&gt; {
                    const isItemSelected = row.checked;
                    const labelId = `enhanced-table-checkbox-${index}`;
  
                    return (
                      &lt;TableRow
                        hover
                        onClick={event =&gt; handleClick(event, row.id)}
                        role="checkbox"
                        aria-checked={isItemSelected}
                        tabIndex={-1}
                        key={row.name}
                        selected={isItemSelected}
                      &gt;
                        &lt;TableCell padding="checkbox"&gt;
                          &lt;Checkbox
                            checked={isItemSelected}
                            inputProps={{ "aria-labelledby": labelId }}
                          /&gt;
                        &lt;/TableCell&gt;
                        &lt;TableCell
                          component="th"
                          id={labelId}
                          scope="row"
                          padding="none"
                        &gt;
                          {row.name}
                        &lt;/TableCell&gt;
                        &lt;TableCell align="right"&gt;{row.email}&lt;/TableCell&gt;
                      &lt;/TableRow&gt;
                    );
                  })}
                {emptyRows &gt; 0 &amp;&amp; (
                  &lt;TableRow style={{ height: 53 * emptyRows }}&gt;
                    &lt;TableCell colSpan={6} /&gt;
                  &lt;/TableRow&gt;
                )}
              &lt;/TableBody&gt;
            &lt;/Table&gt;
          &lt;/TableContainer&gt;
          &lt;TablePagination
            rowsPerPageOptions={[5, 10, 25]}
            component="div"
            count={props.values.artists.length}
            rowsPerPage={rowsPerPage}
            page={page}
            onChangePage={handleChangePage}
            onChangeRowsPerPage={handleChangeRowsPerPage}
          /&gt;
        &lt;/Paper&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>