FlexGridDetail In React Functional Control Throwing Error

FlexGridDetail In React Functional Control Throwing Error

Posted by: matthew.peters on 28 August 2023, 8:13 am EST

• 

  matthew.peters

  • Post Options:
  • Link
    Copy

  Posted 28 August 2023, 8:13 am EST

  I am using the latest version of the Wijmo controls (5.20231.888) and React (18.2.0). All of the Wijmo React documentation demos are using React Class Components and they work great. We are creating React Functional Components that contain Wijmo controls. This sometimes throws exceptions.

  Consider the following code. It is a simplistic example but it demonstrates the issue. When the user clicks the button, it will update a state variable. The number of clicks is then presented to the user. When I click the button, the following exception is thrown:

  Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
  
  at FlexGridDetail (http://localhost:3000/static/js/bundle.js:20015:15)

  Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.
  
  at FlexGrid (http://localhost:3000/static/js/bundle.js:20157:14)

  We are working around the problem by building Class Component. We don’t want to have to do this since this is a new project. Can you assist with determining why the code will not work in a Functional Component?

  import "@grapecity/wijmo.styles/wijmo.css";
  import { FlexGrid, FlexGridColumn } from "@grapecity/wijmo.react.grid";
  import { FlexGridDetail } from "@grapecity/wijmo.react.grid.detail";
  import { useState } from "react";
  
  export const App = () => {
    const [numClicks, setNumClicks] = useState(0);
  
    const handleClick = () => {
      setNumClicks(numClicks + 1);
    };
  
    return (
      <FlexGrid itemsSource={[{ test1: "TESTING", test2: "ALSO TESTING" }]}>
        <FlexGridColumn header="Test 1" binding="test1" width="*" />
        <FlexGridColumn header="Test 2" binding="test2" width="2*" />
        <FlexGridDetail
          template={(ctx: any) => (
            <>
              <button onClick={handleClick}>CLICK ME</button>
              {numClicks}
            </>
          )}
        />
      </FlexGrid>
    );
  };
  
  export default App;

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 28 August 2023, 9:28 pm EST

  Hi,

  I am able to replicate this behavior on my end and have forwarded it to the internal team. I will let you know as soon as I get an update from the internal team. Please note the internal tracking id of this issue for future communications: WJM-30254

  Meanwhile, please use the useRef hook to keep track of the updated value. Also, you need to manually update the textContent of the text/count.

  Please refer to this sample for reference: FlushSync-Count-workaround.zip

  Regards,
  
  Anirudh

• 

  hckim

  • Post Options:
  • Link
    Copy

  Posted 23 October 2023, 6:46 pm EST

  Try This

  const consoleErr = console.error;
  const SUPPRESSED_WARNINGS = [
    'Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.',
  ];
  console.error = function filterWarnings(msg, ...args) {
    if (!SUPPRESSED_WARNINGS.some((entry) => msg.includes(entry))) {
      consoleErr(msg, ...args);
    }
  };