DataTable: Cannot update a component while rendering a different component warning

[BAISTM]

Describe the bug

I've got the below console error when updating a cell

Minimal code reproduction:

export default function PrimeDataTable() {
  const [data, setData] = React.useState([
    {
      value: '2',
    },
  ]);
  return (
    <DataTable value={data}>
      <Column
        field="value"
        editor={options => (
          <input
            value={options.value}
            onChange={event => options.editorCallback?.(event.target.value)}
          />
        )}
        onCellEditComplete={({ newValue }) => {
          setData([{ value: newValue }]);
        }}
      />
    </DataTable>
  );
}

Reproducer

https://codesandbox.io/p/sandbox/primereact-demo-forked-v94dr7?file=%2Fsrc%2FApp.js

PrimeReact version

10.1.1

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. Use a DataTable with cell edit mode
2. Update a React state inside the onCellEditComplete

Expected behavior

The error Cannot update a component should not be displayed in the console.

[melloware]

Your reproducer works fine for me.

also you are doing it wrong from your example.

onValueChange={(e) => options.editorCallback(e.value)}

Already handles changing the data state for you and you try and do it again by doing it on the onCompleteEdit firing the hook again triggering the datatable again.

That is not how cell editing works.

[BAISTM]

Hello @melloware,

My reproducer works functionally, but it triggers a React error in the console.

Sorry, but I don't understand what's wrong in my example.

The onChange updates the state of the input when the editing mode is enabled and the onCompleteEdit synchronize the data when the edition is validated.

How can I synchronize DataTable data without using onCompleteEdit hook ?

Thank you for your response.

[melloware]

I don't have any errors in the console using your reproducer? I can edit say Quantity from 24 to 26 and it works without error?

[BAISTM]

I've got the bellow error on editing a quantity, can you retry plz? Thank you!

Warning: Cannot update a component (`CellEditingDemo`) while rendering a different component (`BodyCell`). To locate the bad setState() call inside `BodyCell`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at eval (https://v94dr7.csb.app/node_modules/primereact/datatable/datatable.esm.js:883:46)
    at tr
    at eval (https://v94dr7.csb.app/node_modules/primereact/datatable/datatable.esm.js:1612:31)
    at tbody
    at eval (https://v94dr7.csb.app/node_modules/primereact/datatable/datatable.esm.js:2133:34)
    at table
    at eval (https://v94dr7.csb.app/node_modules/primereact/virtualscroller/virtualscroller.esm.js:178:23)
    at div
    at div
    at eval (https://v94dr7.csb.app/node_modules/primereact/datatable/datatable.esm.js:4981:23)
    at div
    at CellEditingDemo (https://v94dr7.csb.app/src/App.js:20:55)
    at PrimeReactProvider (https://v94dr7.csb.app/node_modules/primereact/api/api.esm.js:997:26)

[BAISTM]

IMHO, this warning is due to this state update https://github.com/primefaces/primereact/blob/master/components/lib/datatable/BodyCell.js#L71C1-L73C6.

According to facebook/react#18178 (comment), a setState should be wrapped in a useEffect.

Thank you :)

[melloware]

weird yep I do see it now.

[melloware]

OK PR Submitted. Good catch.

[BAISTM]

Thank you :)

[FAMSTM]

The fix in v10.3.0 doesn't solve the problem, there is still console errors when updating a cell

[melloware]

A bunch of changes accidentally got rolled back. I am adding them back in now.

[FAMSTM]

@melloware With v10.3.1, there is still the issue, this ticket should be reopened?

[melloware]

Weird. Let me look again because locally running in NextJS this was working without the warning error after this change.

[melloware]

@BAISTM I am able to reproduce it locally. Very strange but the stack trace line numbers don't really help. This is weird.