Gauges show up twice in React 18 Strictmode

[hunterEdward98]

I'm submitting a...

• Bug report

Current behavior

all kendo-react-gauges components render twice in React 18 Strictmode

Expected behavior

Renders once

Minimal reproduction of the problem with instructions

run the command

npx create-react-app kendo-gauge-duplicates --template typescript followed by cd kendo-gauge-duplicates then npm i @progress/kendo-react-gauges

in App.tsx

Overwrite everything with the following code

import "./App.css";
import { ArcGauge } from "@progress/kendo-react-gauges";

const colors = [
	{
		from: 0,
		to: 20,
		color: "#F00",
	},
];
function App({ value }: { value: number }) {
	const arcCenterRenderer = (value: number, color: string) => {
		return <h3 style={{ color: color }}>{value}%</h3>;
	};
	return (
		<div className="App">
			<header className="App-header">
				<ArcGauge
					colors={colors}
					value={value}
					arcCenterRender={arcCenterRenderer}
				/>
			</header>
		</div>
	);
}

export default App;

in index.tsx

add a value={20} to the App object

run npm start on the project, and you should have multiple gauges showing up

What is the motivation or use case for changing the behavior?

to make the component render appropriately in strict mode

Environment

Package versions:

[email protected] C:\Software\Kendo\kendo-gauges-broken
├── @progress/[email protected]
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Browser:

• Chrome (desktop) version 103.0.5060.114 System:
• TypeScript version: 4.7.4
• Node version: 18.14.0
• Npm version: 8.12.1
• Platform: Windows 10

[edouardmisset]

Same here

[nstoychev]

Fixed in our development channel version 5.5.1-dev.202207141327.

Example: https://stackblitz.com/edit/react-mj12dg?file=app%2Fmain.jsx.