Improve rendering performance of large table data set

Question

I have an n x n Array, which contains all the data for rendering the table cell.

Code sample

const Table = () => {
  const [initData, setInitData] = useState([
    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],
    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],
    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],
    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],
    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],
    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],
    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],
    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],
    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],
    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],
    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],
    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],
    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],
    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],
    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"],
    ["a", "b", "c", "d", "e", "f", "b", "c", "d", "e", "f"]
  ]);

  const handleChange = e => {
    let thisTD = e.target.parentNode;
    let cellIndex = thisTD.cellIndex;
    let rowIndex = thisTD.parentNode.rowIndex;
    let tempArr = [...initData];
    tempArr[rowIndex][cellIndex] = e.target.value;
    setInitData(tempArr);
  };
  return (
    <>
      <table>
        <tbody>
          {initData &&
            initData.map((row, rindex) => (
              <tr key={rindex}>
                {row.map((cell, cindex) => (
                  <td key={cindex}>
                    <textarea value={cell} onChange={handleChange} />
                  </td>
                ))}
              </tr>
            ))}
        </tbody>
      </table>
    </>
  );
};

The problem is, whenever a cell changes its own data, all the table's cells will be re-render.

This causes slow performance and lagging when a user changes a cell's content if the amount of cells increases.

At present, everything works, but I want to improve the performance for scaling purposes. Making the whole table to be re-rendered in every change seems stupid and expensive, so how can I change the data structure or my React component? Thanks for every idea!

Answer 1

First let's check that everything gets rendered:

row.map((cell, cindex) => {
  console.log([cell, cindex], `rendered`);
  return (
    <td key={cindex}>
      <textarea value={cell} onChange={handleChange} />
    </td>
  );
});

On each cell change, all table is rendered.

We can fix it with React.memo and a bit of useRef for fixing closure problems:

const Entry = ({ value, rindex, cindex, onChange }) => {
  console.log([rindex, cindex], 'rendered');
  const textRef = useRef();
  const $onChange = () => {
    onChange(prev => {
      let tempArr = [...prev];
      tempArr[rindex][cindex] = textRef.current.value;
      return tempArr;
    });
  };

  return (
    <td>
      <textarea ref={textRef} value={value} onChange={$onChange} />
    </td>
  );
};

const MemoEntry = React.memo(Entry);

const Table = () => {
  const [initData, setInitData] = useState([['a', 'b', 'c'], ['a', 'b', 'c']]);

  return (
    <>
      <table>
        <tbody>
          {initData &&
            initData.map((row, rindex) => (
              <tr key={rindex}>
                {row.map((cell, cindex) => {
                  return (
                    <MemoEntry
                      key={cindex}
                      rindex={rindex}
                      cindex={cindex}
                      value={cell}
                      onChange={setInitData}
                    />
                  );
                })}
              </tr>
            ))}
        </tbody>
      </table>
    </>
  );
};