How to recalculate uncalculated formulas and their dependent cells after refreshing the React Spreadsheet?

This knowledge base article explains how to recalculate uncalculated formulas and their dependent cells after refreshing the React Spreadsheet. This can be achieved by using the calculateNow method of the Spreadsheet. This method recalculates uncalculated formulas and their dependent cells by accepting a scope property, which determines whether the recalculation is performed within a single sheet or across the entire workbook.

[index.js]

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent,SheetsDirective,SheetDirective } from '@syncfusion/ej2-react-spreadsheet';
import { ColumnsDirective, ColumnDirective, RowsDirective, RowDirective, CellsDirective,CellDirective} from '@syncfusion/ej2-react-spreadsheet';

function App() {
 const spreadsheetRef = React.useRef(null);
 const onClick = React.useCallback(() => {
   let spreadsheet = spreadsheetRef.current;
   spreadsheet.refresh();
   //To recalculate the uncalculated formula and its dependent cells all over the Workbook. 
   spreadsheet.calculateNow('Workbook');
 }, []);

 return (
   <>
     <button className="e-btn" onClick={onClick}>Refersh Sheet</button>
     <SpreadsheetComponent  showRibbon ref={spreadsheetRef} allowSave={true} saveUrl="https://services.syncfusion.com/react/production/api/spreadsheet/save" openUrl="https://services.syncfusion.com/react/production/api/spreadsheet/open" >
       <SheetsDirective>
         <SheetDirective name="SheetA">
           <RowsDirective>
             <RowDirective>
               <CellsDirective>
                 <CellDirective formula="=+SheetB!A1"></CellDirective>
               </CellsDirective>
             </RowDirective>
             <RowDirective>
               <CellsDirective>
                 <CellDirective value="0"></CellDirective>
               </CellsDirective>
             </RowDirective>
             <RowDirective>
               <CellsDirective>
                 <CellDirective value="0"></CellDirective>
               </CellsDirective>
             </RowDirective>
             <RowDirective></RowDirective>
           </RowsDirective>
           <ColumnsDirective>
             <ColumnDirective width={150}></ColumnDirective>
           </ColumnsDirective>
         </SheetDirective>

         <SheetDirective name="SheetB">
           <RowsDirective>
             <RowDirective>
               <CellsDirective>
                 <CellDirective formula="=+A2+A3"></CellDirective>
               </CellsDirective>
             </RowDirective>
             <RowDirective>
               <CellsDirective>
                 <CellDirective formula="=+SheetA!A2"></CellDirective>
               </CellsDirective>
             </RowDirective>
             <RowDirective>
               <CellsDirective>
                 <CellDirective formula="=+SheetA!A3"></CellDirective>
               </CellsDirective>
             </RowDirective>
             <RowDirective></RowDirective>
           </RowsDirective>
           <ColumnsDirective>
             <ColumnDirective width={150}></ColumnDirective>
           </ColumnsDirective>
         </SheetDirective>

         <SheetDirective name="SheetC">
           <RowsDirective>
             <RowDirective>
               <CellsDirective>
                 <CellDirective value="1"></CellDirective>
               </CellsDirective>
             </RowDirective>
             <RowDirective></RowDirective>
           </RowsDirective>
           <ColumnsDirective>
             <ColumnDirective width={150}></ColumnDirective>
           </ColumnsDirective>
         </SheetDirective>
       </SheetsDirective>
     </SpreadsheetComponent>
   </>
 );
}
export default App;

const root = createRoot(document.getElementById('sample'));
root.render(<App />); 

Sample link: https://stackblitz.com/edit/react-yu8m9t-sokfrv?file=index.js

Output:

For more information, please refer to the links mentioned below.

Documentation: Formulas in React Spreadsheet component | Syncfusion

Demos: Spreadsheet · Formula · Syncfusion React UI Components