Import React from "react"; export class TestCompnent<P, S> extends React.Component<P, S>

{

public data: string[][][] = [];
public multiplier: number = 1;

constructor(props: P, context: S) {
super(props, context);
this.makeData();
setTimeout(() => this.updateData(), 1000);
}

public updateData(): void {
this.makeData();
console.time("redraw");
this.forceUpdate(() => console.timeEnd("redraw"));
setTimeout(() => this.updateData(), 1000);
}

public makeData() {
this.multiplier = this.multiplier === 1 ? 2 : 1;
this.data = new Array(10).fill(1).map((valX: number, indexX: number) => {
return new Array(10).fill(1).map((valY: number, indexY: number) => {
return new Array(10).fill(1).map((valZ: number, indexZ: number) => {
return String(
indexX * 1000 * this.multiplier +
indexY * 100 * this.multiplier +
indexZ * 10 * this.multiplier
);
});
});
});
}

public render(): JSX.Element {
return (
<div className="root">
{
this.data.map((valX: string[][], indexX: number) => (
<div key={indexX} data-test={indexX}>
{
valX.map((valY: string[], indexY: number) => (
<div key={indexY} data-test={indexY}>
{
valY.map((valZ: string, indexZ: number) => (
<div key={indexZ} data-test={indexZ}>
{valZ}
</div>
))
}
</div>
))
}
</div>
))
}
</div>
);
}
}
Сделал тест забавный, с ключем получается в 2 раза дольше чем без ключа

Гист и кодсандбокс существует для такого

Охтыж