How to update a dynamic column efficiently?

Question

I am using React with ant desing table, my code was like this:

const columns = moduleColumn.getColumns(columnName)
columns[columns.length-1].title ==='Action' ? console.log("no need to add the column! ") :
columns.push({
  title: "Action",
  dataIndex: "id",
  key: "id",
  align: "center",
  render: (text, record, index) =>
  {
    return (
      <ActionOuvrage
        text={text}
        record={record}
        index={index}
        ouvrage={props.ouvrage}
        refData={props.refData}
        handleShownComponent={props.handleShownComponent}
        handleDataAction={props.handleDataAction}
        handleIdOuvrage={props.handleIdOuvrage}
        loadOuvrageData={loadOuvrageData}
      />
    )
  },
})
setTableData((prevState) => {return { ...prevState, data: fetchedData, columns: columns, total: count }}); 

the first time the component render it worked fine but starting with the second one my Action column was like a dead component who I can't interact with it, the props wasn't updating my states it was disconnected

Then I updated my code to this:

const columns = moduleColumn.getColumns(columnName)
columns[columns.length-1].title ==='Action' ? columns.pop() : console.log("no need to update the column! ")
columns.push({
  title: "Action",
  dataIndex: "id",
  key: "id",
  align: "center",
  render: (text, record, index) =>
  {
    return (
      <ActionOuvrage
        text={text}
        record={record}
        index={index}
        ouvrage={props.ouvrage}
        refData={props.refData}
        handleShownComponent={props.handleShownComponent}
        handleDataAction={props.handleDataAction}
        handleIdOuvrage={props.handleIdOuvrage}
        loadOuvrageData={loadOuvrageData}
      />
    )
  },
})
setTableData((prevState) => {return { ...prevState, data: fetchedData, columns: columns, total: count }}); 

moduleColumn is a static js file of arrays where I store my columns, I understand that if I push an object in one of that array it will be permanent in my web page until I reload it because I import a ref to that Array and not exactly a copy of it (javascript). but I am missing something why, in the first code, if I push an object to my array then a state rerender it disconnect from my component ? it's a React case and I didn't find something that explain me what is the cause of it and how to solve it.
Can someone light my candle ?

Answer 1

After some research, I found that imported arrays in JavaScript are mutable. When I make modifications to this array, the changes persist throughout the lifetime of the application or until the web page is refreshed.

To avoid this behavior and prevent unintended modifications, I've created a shallow copy of the array:

const newColumns = [...moduleColumn.getColumns(columnName)]

This ensures that the original array remains unaltered while allowing me to work with a local copy.