react table 中有必要使用useMemo吗？

Question

我想知道是否有必要在 React table 中对列和数据使用 useMemo，如果是，为什么会这样？

这是我的代码：

import React, { useMemo } from "react";
import useData from "../../hooks/useData";
import Table from "./Table";

import Loader from "../../assets/imgs/loader.svg";

const TableSection = React.memo(({ query, isOpen }) => {
  const { data, runtime, error } = useData(query);

  const column =
    data.length > 0 &&
    Object.keys(data[0]).map((key) => {
      const result = data[0][key]
        .replace(/([A-Z]+)/g, " ")
        .replace(/([A-Z][a-z])/g, " ");
      return {
        Header: result,
        accessor: key,
      };
    });
  const columns = useMemo(() => column, [column]);
  const queryData = useMemo(() => data.slice(1), [data]);

  if (error)
    return (
      <section
        className={`${
          isOpen ? "col-start-2" : "col-start-1"
        } col-end-3 row-start-3 row-end-4 text-white m-6`}
      >
        <h1 className="text-center font-bold text-xl text-primary-dark">
          Something Went Wrong{" "}
          <span role="img" aria-label="sad face">
            
          </span>
        </h1>
      </section>
    );
  return (
    <>
      <section
        className={`${
          isOpen ? "col-start-2" : "col-start-1"
        } col-end-3 row-start-3 row-end-4 text-white mx-6 my-12 lg:mx-12 overflow-hidden`}
      >
        {data.length > 0 ? (
          <>
            <p className="text-primary-dark">
              Query took:{" "}
              <span className="font-bold">{`${runtime.toFixed(2)} ms`}</span>
            </p>
            <Table
              columns={columns}
              completeData={data}
              data={queryData}
              query={query}
            />
          </>
        ) : (
          <img src={Loader} className="w-20 mx-auto" alt="loader" />
        )}
      </section>
    </>
  );
});

export default TableSection;

Answer 1

可以，推荐使用useMemo。

useTable 挂钩获取列，如果您的组件出于任何原因重新呈现，将创建一个新的列数组（如果未使用 useMemo）和 useTable 会不必要地重新计算底层逻辑。

顺便说一句，您使用的 useMemo 不正确，因为 column 每次 TableSection 重新呈现时都会更改，并且它被用作 useMemo 的依赖项。如果声明在 useMemo 内移动，它只会在 data 更新时发生变化。所以，这就是你应该如何使用它

const columns = useMemo(() => {
  if (!data[0].length) return [];

  return Object.keys(data[0]).map((key) => {
    const result = data[0][key]
      .replace(/([A-Z]+)/g, ' ')
      .replace(/([A-Z][a-z])/g, ' ');

    return {
      Header: result,
      accessor: key,
    };
  });
}, [data]);

react table 中有必要使用useMemo吗？

Is it necessary to use useMemo in react table?

reactjs

react-table