TreeTable: large number of errors in console when running in React "dev" mode

[david-bezero]

Describe the bug

When running an app containing a TreeTable in react-dom's dev mode, a large number of errors like this are printed to the console (React suppresses these checks in production):

Warning: React does not recognize the __TYPE prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase __type instead. If you accidentally passed it from a parent component, remove it from the DOM element.

So many errors are printed (with long stack traces) that it actually causes performance issues when using the dev tools. The underlying issue seems to be that collections of properties are passed through multiple layers, building up a mix of DOM properties and internal properties, then all are assigned to a DOM node.

The full list of errors from a simple TreeTable (for reference and searchability):

Warning: React does not recognize the __TYPE prop on a DOM element
Warning: React does not recognize the alignFrozen prop on a DOM element
Warning: React does not recognize the alignHeader prop on a DOM element
Warning: React does not recognize the bodyClassName prop on a DOM element
Warning: React does not recognize the bodyStyle prop on a DOM element
Warning: React does not recognize the cellEditValidator prop on a DOM element
Warning: React does not recognize the cellEditValidatorEvent prop on a DOM element
Warning: React does not recognize the columnKey prop on a DOM element
Warning: Invalid DOM property dataType. Did you mean datatype?
Warning: React does not recognize the excludeGlobalFilter prop on a DOM element
Warning: Received false for a non-boolean attribute expander
Warning: React does not recognize the exportField prop on a DOM element
Warning: Received true for a non-boolean attribute exportable
Warning: Received false for a non-boolean attribute filter
Warning: React does not recognize the filterApply prop on a DOM element
Warning: React does not recognize the filterClear prop on a DOM element
Warning: React does not recognize the filterElement prop on a DOM element
Warning: React does not recognize the filterField prop on a DOM element
Warning: React does not recognize the filterFooter prop on a DOM element
Warning: React does not recognize the filterFunction prop on a DOM element
Warning: React does not recognize the filterHeader prop on a DOM element
Warning: React does not recognize the filterHeaderClassName prop on a DOM element
Warning: React does not recognize the filterHeaderStyle prop on a DOM element
Warning: React does not recognize the filterMatchMode prop on a DOM element
Warning: React does not recognize the filterMatchModeOptions prop on a DOM element
Warning: React does not recognize the filterMaxLength prop on a DOM element
Warning: React does not recognize the filterMenuClassName prop on a DOM element
Warning: React does not recognize the filterMenuStyle prop on a DOM element
Warning: React does not recognize the filterPlaceholder prop on a DOM element
Warning: React does not recognize the filterType prop on a DOM element
Warning: React does not recognize the footerClassName prop on a DOM element
Warning: React does not recognize the footerStyle prop on a DOM element
Warning: Received false for a non-boolean attribute frozen
Warning: React does not recognize the headerClassName prop on a DOM element
Warning: React does not recognize the headerStyle prop on a DOM element
Warning: React does not recognize the headerTooltip prop on a DOM element
Warning: React does not recognize the headerTooltipOptions prop on a DOM element
Warning: React does not recognize the maxConstraints prop on a DOM element
Warning: Unknown event handler property onBeforeCellEditHide. It will be ignored.
Warning: Unknown event handler property onBeforeCellEditShow. It will be ignored.
Warning: Unknown event handler property onCellEditCancel. It will be ignored.
Warning: Unknown event handler property onCellEditComplete. It will be ignored.
Warning: Unknown event handler property onCellEditInit. It will be ignored.
Warning: Unknown event handler property onFilterApplyClick. It will be ignored.
Warning: Unknown event handler property onFilterClear. It will be ignored.
Warning: Unknown event handler property onFilterConstraintAdd. It will be ignored.
Warning: Unknown event handler property onFilterConstraintRemove. It will be ignored.
Warning: Unknown event handler property onFilterMatchModeChange. It will be ignored.
Warning: Unknown event handler property onFilterOperatorChange. It will be ignored.
Warning: Received true for a non-boolean attribute reorderable.
Warning: Received true for a non-boolean attribute resizeable.
Warning: React does not recognize the rowEditor prop on a DOM element
Warning: React does not recognize the rowReorder prop on a DOM element
Warning: React does not recognize the rowReorderIcon prop on a DOM element
Warning: React does not recognize the selectionMode prop on a DOM element
Warning: React does not recognize the showAddButton prop on a DOM element
Warning: React does not recognize the showApplyButton prop on a DOM element
Warning: React does not recognize the showClearButton prop on a DOM element
Warning: React does not recognize the showFilterMatchModes prop on a DOM element
Warning: React does not recognize the showFilterMenu prop on a DOM element
Warning: React does not recognize the showFilterMenuOptions prop on a DOM element
Warning: React does not recognize the showFilterOperator prop on a DOM element
Warning: React does not recognize the sortField prop on a DOM element
Warning: React does not recognize the sortFunction prop on a DOM element
Warning: Received false for a non-boolean attribute sortable
Warning: React does not recognize the sortableDisabled prop on a DOM element
Warning: React does not recognize the ptOptions prop on a DOM element
Warning: Received false for a non-boolean attribute unstyled

(stack traces omitted for brevity)

These were generated from a simple setup:

<TreeTable lazy value={[]} onExpand={() => null} onRowClick={() => null}>
  <Column field="name" header="Name" className="column-name" expander />
  <Column field="other" header="Other" className="column-other" />
</TreeTable>

The volume of errors is problematic from a development perspective (drowning out other issues and causing performance problems with browser dev tools), but there are also potential bugs where the names happen to coincide with actual DOM attributes, which could cause unexpected behaviours in some situations (if a value happens to match one recognised by the browser).

Ideally internal properties should be passed around separately, or filtered out before rendering a DOM element.

Reproducer

No response

PrimeReact version

10.2.1

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[melloware]

Duplicate of #5427 already fixed in main