react hooksで書き直したコードを実行すると、ブラウザがフリーズしてしまう。

前提・実現したいこと

react-bootstrap-tableというコンポーネントのremoteという機能の使用例があるのですが、これをReact hooksをつかって書き直そうとすると、ブラウザがフリーズします。

発生している問題・エラーメッセージ

ブラウザの画面が固まります。

該当のソースコード

javascript
1import React, { useState, useEffect } from "react";
2import ReactDOM from "react-dom";
3
4import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
5import _ from "lodash";
6
7const dataTable = _.range(1, 60).map((x) => ({
8  id: x,
9  name: `Name ${x}`,
10  surname: `Surname ${x}`
11}));
12
13// Simulates the call to the server to get the data
14const fakeDataFetcher = {
15  fetch(page, size) {
16    return new Promise((resolve, reject) => {
17      resolve({
18        items: _.slice(dataTable, (page - 1) * size, (page - 1) * size + size),
19        total: dataTable.length
20      });
21    });
22  }
23};
24
25function DataGrid2() {
26  const [totalSize, setTotalSize] = useState(0);
27  const [page, setPage] = useState(1);
28  const [sizePerPage, setSizePerPage] = useState(10);
29  const [items, setItems] = useState([]);
30
31  useEffect(() => {
32    fetchData(page, sizePerPage);
33  });
34
35  function fetchData(page, sizePerPage) {
36    fakeDataFetcher.fetch(page, sizePerPage).then((data) => {
37      setItems(data.items.slices(0, data.total));
38      setTotalSize(data.total);
39      setPage(page);
40      setSizePerPage(sizePerPage);
41    });
42  }
43
44  function handlePageChange(page, sizePerPage) {
45    fetchData(page, sizePerPage);
46  }
47
48  function handleSizePerPageChange(sizePerPage) {
49    // When changing the size per page always navigating to the first page
50    fetchData(1, sizePerPage);
51  }
52
53  const options = {
54    onPageChange: handlePageChange,
55    onSizePerPageList: handleSizePerPageChange,
56    page: page,
57    sizePerPage: sizePerPage
58  };
59
60  return (
61    <BootstrapTable
62      data={items}
63      options={options}
64      fetchInfo={{ dataTotalSize: totalSize }}
65      remote
66      pagination
67      striped
68      hover
69      condensed
70    >
71      <TableHeaderColumn dataField="id" isKey dataAlign="center">
72        Id
73      </TableHeaderColumn>
74      <TableHeaderColumn dataField="name" dataAlign="center">
75        Name
76      </TableHeaderColumn>
77      <TableHeaderColumn dataField="surname" dataAlign="center">
78        Surname
79      </TableHeaderColumn>
80    </BootstrapTable>
81  );
82}
83
84export default DataGrid2;
85
86ReactDOM.render(<DataGrid2 />, document.getElementById("container"));
87

試したこと

setItems(data.items.slices(0, data.total));をコメントアウトするとフリーズしなくなるので、関係あると思っています。

補足情報（FW/ツールのバージョンなど）

https://codesandbox.io/signin?continue=/dashboard
で実行しました。
package.jsonです。

json
1{
2  "name": "react-playground",
3  "version": "1.0.0",
4  "description": "",
5  "keywords": [],
6  "homepage": "https://codesandbox.io/s/zzloxr09mp",
7  "main": "index.js",
8  "dependencies": {
9    "lodash": "4.17.21",
10    "react": "17.0.2",
11    "react-bootstrap-table": "4.3.1",
12    "react-dom": "17.0.2",
13    "react-flexbox-grid": "2.1.0"
14  }
15}