Why does ReactJS render twice - reactjs

Question

Ref: https://stackblitz.com/edit/react-ts-t7ynzi?file=App.tsx
When the Simple Add button is clicked, why does the component renders twice?
This causes problem when the the state has nested data and arrays because each render causes the event to be handled multiple times (see https://stackblitz.com/edit/react-ts-t7ynzi?file=App.tsx)
How can I prevent the rendering and duplicate processing of the onclick event?
interface SimpleFormProps {
data: number;
onAdd: () => void;
}
const SimpleForm = ({ data, onAdd }: SimpleFormProps) => {
return (
<form>
{data}
<button type="button" onClick={() => onAdd()}>
Simple Add
</button>
</form>
);
};
export default function App() {
const [simpleData, setSimpleData] = React.useState(10);
const handleSimpleAdd = () => {
setSimpleData((prev) => {
const newData = prev + 1;
// expect to be called once each click,
// but actually it is called twice each click
console.log('handleSimpleAdd');
return newData;
});
};
return (
<div>
<SimpleForm data={simpleData} onAdd={() => handleSimpleAdd()} />
</div>
);
}```

Answer 1

Change this:
class ComplexFormData {
stuff: number[];
constructor(prev: ComplexFormData | undefined = undefined) {
if (prev) {
this.stuff = prev.stuff;
} else {
this.stuff = [];
}
}
}
to this:
class ComplexFormData {
stuff: number[];
constructor(prev: ComplexFormData | undefined = undefined) {
if (prev) {
this.stuff = [...prev.stuff];
} else {
this.stuff = [];
}
}
}
The problem is that you are modifying the existing reference instead of creating a new one which causes bugs like that
fixed example