DataTable => Column: onCellEditComplete is fired twice

[Fallup]

Describe the bug

onCellEditComplete of the Column component in the DataTable is fired twice on version 10.5.1
Can be reproduced with the StackBlitz example directly from the docs.

This was working fine on version 9.6.4

Reproducer

https://stackblitz.com/edit/rb6yv7?file=src%2FApp.tsx

PrimeReact version

10.5.1

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Edit cell, click away and see that the onCellEditComplete is called twice.

Expected behavior

onCellEditComplete should be called only once

[kl-nevermore]

looks like strict mode

[Chimi-RE]

Any work around before the issue gets resolved? Thank you!

[Fallup]

Any work around before the issue gets resolved? Thank you!

The only workaround I found was to use useRef as a guard.
Set it to true/false at the start/end of the onCellEditComplete callback and add a guard at the start of the callback, e.g.:

       ...
       const cellEditCompletePending = useRef(false)
       ...
      <Column
        onCellEditComplete={async (e) => {
              if (cellEditCompletePending.current) {
                  return
              }
              cellEditCompletePending.current = true
              // do stuff
              cellEditCompletePending.current = false
        }}
        />
        ...

[didix16]

I have the same issue at 10.6.5 version but only onKeyDown. I was trying to debug it and see what is causing the function to be called twice but It seems to me that is something related with React... Could it be @melloware ?

BTW, cellEditValidator is also being calld twice. In fact this code inside this function is what is being called twice when onKeyDown event is fired:

primereact/components/lib/datatable/BodyCell.js

Lines 167 to 196 in 463ba5c

	setEditingRowDataState((prev) => {
	const newRowData = prev;
	const newValue = resolveFieldData(newRowData);
	const params = { ...callbackParams, newRowData, newValue };
	const onCellEditCancel = getColumnProp('onCellEditCancel');
	const cellEditValidator = getColumnProp('cellEditValidator');
	const onCellEditComplete = getColumnProp('onCellEditComplete');
	if (!submit && onCellEditCancel) {
	onCellEditCancel(params);
	}
	let valid = true;
	if ((!submit || cellEditValidateOnClose()) && cellEditValidator) {
	valid = cellEditValidator(params);
	}
	if (valid) {
	if (submit && onCellEditComplete) {
	setTimeout(() => onCellEditComplete(params));
	}
	closeCell(event);
	} else {
	event.preventDefault();
	}
	return newRowData;
	});

The event is only fired once but the code inside setEditingRowDataState is being called twice.

The funny thing is that only happens if the value of the cell has been changed.

Edit

@kl-nevermore has right. I just found this issue on stackoverflow: https://stackoverflow.com/questions/62106596/reactjs-setstate-being-called-twice-in-a-function-called-once-why that references this facebook/react#12856 (comment)

It seems is that is the current behaviour of React, executing twice the setter callback when using React.StrictMode.

So my question is: Is it possible that React strictMode is being activated on production release?

Maybe a solution could be execute the code inside setEditingRowDataState at outside the setter, obtaining the prev by checking the component data reference and simply just return the newRowData. I don't know.

[kl-nevermore]

RP submitted
use ref cached editingRowDataState

• prevent warning of Cannot update a component while rendering a different component(DataTable: Cannot update a component while rendering a different component warning #5556 ),call other setState in the callback of setState
• switchCellToViewMode is triggered by useEventListener,but got stale value in listener
• remove unnecessary timer