setState in AfterHideColumns make handsontable re-render again and again

Tags: #<Tag:0x00007efc654509f8> #<Tag:0x00007efc65450890>
#1

When I am setting a state with the setState method to store the columnHiding index in the afterHideColumn Hook then table re-render again and again until page broke
please help

#2

Hi @siddhantjain15298

I’ve downloaded a small React here https://we.tl/t-gnXTatWNOJ where I control the state of the hidden columns. Could you alter ti so it shows your current configuration?

#3

Hi @aleksandra_budnik
But i want to setState in afterHideColumn Hook which goes render into infinite loop
and if i am not setting a state then other setState calls and reset the hidden columns configuration

#4

So is the afterHideColumns hook only used to update the state of hidden columns or does it do anything else? I will prepare a demo for that.

ps. do you store hidden indexes as an array in the state or you prefer to store the indexes of visible columns?

#5

Yeah I just want to maintain a state of hidding column index using afterHideColumns and afterUnhideColumns hooks in handsontable whenever user click hide column and show column from context menu

#6

I think you are trying to keep the state of hidden columns on every re-render. by default handsontable resets the hidden columns when page re-renders.
you don’t need to setState directly in afterHideColumns etc. Handsontable manages it by itself. you just need to store every hidden column in localStorage etc and on component mount you can retrieve that list and hide the columns.

  const afterColumnsHiddenStateChange = (
_: number[],
destinationHideConfig: number[]
) => {
!firstLoad &&
  localStorage.setItem(
    `hiddenColumns`,
    JSON.stringify(destinationHideConfig)
  );

 firstLoad && setFirstLoad(!firstLoad);
};

columnUnhides

const afterColumnsUnhide = (_: number[], destinationHideConfig: number[]) => {
   localStorage.setItem(
     `hiddenColumns`,
      JSON.stringify(destinationHideConfig)
    );
};

This is how you can set hidden columns on component mount

useEffect(()=>{
        let existingHiddenCols: number[] = JSON.parse(
        localStorage.getItem(
                  `hiddenColumns`
             )  || `[]`
    );
setHiddenColumns(existingHiddenCols);

}, [] )

now you can use hiddenColumns state in <HotTable />

#7

Thank you for your input @jamshaidbutt055
I can also add that the solution you wanted to use produces React error #185 - infinite loop.

#8