Mam poniższy kod
import { useState } from "react";
class Parent {
constructor() {
this.child = new Child();
}
}
class Child {
constructor() {
this.message = '1st message';
}
}
function Component() {
const wait = (time) => new Promise(r => setTimeout(r, time));
const [ parent, setParent] = useState(null);
const [ update, setUpdate ] = useState(0);
if(parent === null) setParent(new Parent());
const click = () => {
async function run () {
parent.child.message = '2nd message';
setUpdate(update + 1);
await wait(1000);
parent.child.message = '3rd message';
setUpdate(update + 2);
};
run();
};
return <div>
<button onClick={click}>Run</button>
<span>{parent && parent.child.message}</span>
</div>;
}
export default Component;
W praktyce wszystko działa, czyli za pierwszym razem mam '1st message', naciskając przycisk '2nd message' i po kolejnej sekundzie '3rd message'.
Pytanie czy taki kod jest poprawny?
Po pierwsze wykonuje setParent tylko raz, a modyfikuje jego właściwości bezpośrednio.
Po drugie await wait(1000) czeka, a setUpdate(update + 1) się wykonuje i Component jest renderowany ponowie z '2nd message'.