1. Home
  2. Forum
  3. React - EJ 2
  4. "Maximum call stack size exceeded" when updating state variable and using Column[] for columns-property

"Maximum call stack size exceeded" when updating state variable and using Column[] for columns-property

Hi,
I'm getting the following error:



I've identified, that the problem occurs only in a combination when updating a state variable and using the "Column" class to define the various columns of the grid.
I've attached a demo, that shows the problem.


Attachment: demo_d8ad4ba8.zip

7 Replies 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team May 4, 2021 10:30 AM UTC

Hi Laurin, 
 
Thanks for contacting Syncfusion support. 
 
We have analyzed the attached code example and found that you were created the grid column in wrong format. This is the cause of issue. 
 
We suggest you to bind create columns in the following way to resolve your problem. 
 
[index.tsx] 
export const Default = () => { 
 
  const [test, setTest] = useState<object[] | undefined>(undefined); 
 
  const columns: Column[] = [ 
   { 
      field: "OrderID",  
      headerText: "Order ID", 
      width: "20%" 
   }, 
    { 
      field: "CustomerID",  
      headerText: "Customer ID", 
      width: "30%" 
    }, 
   { 
      field: "ShipName", 
      headerText:"Name", 
      width: "50%" 
    } 
  ]; 
 
  useEffect(() => { 
     axios 
      .get( 
      ) 
      .then(({ data }) => { 
        setTest(data); //if you comment this line, the code/demo works perfectly 
      }); 
  }) 
 
  return ( 
    <GridComponent 
      dataSource={datasource} 
      columns={columns} 
    > 
    </GridComponent> 
  ); 
} 
 
 
Find the below modified sample for your reference. 
 
 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S 


LS Laurin S May 4, 2021 12:23 PM UTC

Thanks for the quick reply.

However, I need to use the "Column" object, since I wrote my own "Column" class, that is an extension of the original "Column" class (inheritance). 
With the older version of the npm syncfusion grid package (19.1.56), the attached piece of code worked as expected, however with the newest version it doesn't work anymore (19.1.58).

Any suggestions?


RS Rajapandiyan Settu Syncfusion Team May 7, 2021 12:19 PM UTC

Hi Laurin, 
 
Thanks for your update. 
 
We can reproduce the reported behavior with your attached code example. Currently, we are validating this at our end. So, we will update the further details on or before May 11th 2021. 
 
Until then, we appreciate your patience. 
 
Regards, 
Rajapandiyan S 


RS Rajapandiyan Settu Syncfusion Team May 11, 2021 11:41 AM UTC

Hi Laurin, 
 
Thanks for your patience. 
 
By analyzing your code example, we suspect that you want to the update the constant variable when dynamically get the data from the API success. You can use below code to achieve your requirement. 
 
[index.tsx] 
 
export const Default = () => { 
 
  const [test, setTest] = useState({}); //demo state variable, just to show the problem (no further usage) 
 
    const columns: Column[] = [ 
    new Column({ 
      field: "OrderID",  
      headerText: "Order ID", 
      width: "20%" 
    }), 
    new Column({ 
      field: "CustomerID",  
      headerText: "Customer ID", 
      width: "30%" 
    }), 
    new Column({ 
      field: "ShipName", 
      headerText:"Name", 
      width: "50%" 
    }) 
  ]; 
 
  useEffect(() => { 
    let a; 
      .then(({ data }) => { 
        a= data; 
      },[null,a]); 
  }) 
 
  return ( 
    <GridComponent 
      dataSource={datasource} 
      columns={columns} 
    > 
    </GridComponent> 
  ); 
} 
 
 
Find the below modified sample for your reference. 
 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S 


LS Laurin S May 11, 2021 12:00 PM UTC

Sorry, but I think your suggested solution does not make sense. You are neither using the state variable "test", that caused initially the error, nor is this a solution in my eyes, but rather a "temporary" hack...

Is it possible to have the working solution back, which was used before the newest version of the data grid?

RS Rajapandiyan Settu Syncfusion Team May 18, 2021 03:50 AM UTC

Hi Laurin, 
 
Thanks for your update. 
 
We can reproduce the reported behavior at our end. We have confirmed this is an issue from our side and logged a bug for the same as “Maximum call stack size exceeded" when updating state variable using "useEffect”. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release which will be rolled out on May 26th, 2021. 
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  
 
 
Regards, 
Rajapandiyan S 


RS Rajapandiyan Settu Syncfusion Team May 26, 2021 11:47 AM UTC

Hi Laurin, 
  
Thanks for your patience. 
  
We are glad to announce that our Essential Javascript2 patch release (v19.1.64) has been rolled out successfully and in that release we have added the fix of “Maximum call stack size exceeded" when updating state variable using "useEffect” issue. So, please update your package to the current version to get this. 
  
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
  
Regards, 
Rajapandiyan S 


Marked as answer
Loader.
Up arrow icon