On re-render, cell meta data lost

Tags: #<Tag:0x00007f24a34719f8>

Urgent help.
import React, { useEffect, useState, useRef } from “react”;
// import { connect } from “react-redux”;
import Handsontable from “handsontable”;
import { HotTable } from “@handsontable/react”;
import “…/…/…/…/public/css/test.css”;

const hotData = Handsontable.helper.createSpreadsheetData(6, 10);

const App = () => {
let tableRef = useRef(null);
let hotInstance = null;
let startRow;
let startColumn;
let endRow;
let endColumn;
const [counter, setCounter] = useState(0);

useEffect(() => {
hotInstance = tableRef.current.hotInstance;
}, [tableRef]);

useEffect(() => {
document.addEventListener(“click”, handleClick);
return () => document.removeEventListener(“click”, handleClick);
}, [handleClick]);

const handleClick = (event) => {
const { target } = event;
if (!target.classList.contains(“btn”)) {

const color = target.getAttribute("data-color");

for (var j = 0; j < endColumn - startColumn + 1; j++) {
  for (var i = 0; i < endRow - startRow + 1; i++) {
      startRow + i,
      startColumn + j,



return (

Make cells green

Make cells orange

<button onClick={() => setCounter((prev) => prev + 1)}>Counter

data: hotData,
colWidths: 100,
rowHeights: 23,
rowHeaders: true,
colHeaders: true,
afterSelectionEnd: function (r, c, r2, c2) {
[startRow, endRow] = [Math.min(r, r2), Math.max(r, r2)];
[startColumn, endColumn] = [Math.min(c, c2), Math.max(c, c2)];
licenseKey: “non-commercial-and-evaluation”,


export default App;

Hi @nishantonline1

Please create an online example (JSFiddle, CodePen, etc.) and steps to replicate your issue.

Hi @aleksandra_budnik

fiddle url: https://jsfiddle.net/syakmw4d/2/

For regenerating using follow below steps:

  1. Select cell
  2. Click on “Make cells green” button.
  3. Repeat above two multiple times (optional).
  4. click on counter button

Boom, the cell meta data vanished, that’s the issue.

Hi @nishantonline1
Setting states in the component containing HotTable will “update” the Handsontable instance every time. That causes clearing cells meta. You can wrap HotTable to the PureComponent/React.memo().

A similar thread I showed how to do it: Downgrading performance of entire app when provide 1000+ row

Hi @piotr.laszczkowski

thanks for your reply, the fiddle shared in Downgrading performance of entire app when provide 1000+ row is good to start.

it’s better if guys upload reacts examples that contain these metadata changes, reading cell/source data, data initialization via API, that’ll be helpful.

Hi @piotr.laszczkowski

is there any other way to prevent cellmeta from clearing?

At the moment, that’s the only way. You can track work progress on this limitation in the following issue: https://github.com/handsontable/handsontable/issues/8372.

Hi @piotr.laszczkowski,

Sorry but due to this issue, our production app is struggling. I hope you guys will be able to solve it on priority.

Hi @nishantonline1

Please leave me your email address at support@handsontable.com, and I will keep you updated with the progress.

Hi @aleksandra_budnik
Email sent

I am happy to announce that the epic at https://github.com/handsontable/handsontable/issues/8372 is solved in v12. If you would have any issues with updating to the newest version please contact us at support@handsontable.com