Goodbye, useEffect: David Khourshid
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about useEffect dependency arrays and dependent state updates, to argue that effects shouldn't be used to control data flow.
Recommended by 2 people across 2 different months, 2022 to 2022.
What it is
A 26-minute conference talk from Reactathon 2022 in which David Khourshid, founder of Stately, argues that overusing useEffect leads to tangled side-effect logic. He shows how state machines and statecharts can model effects declaratively and visually in React apps.
What people said
Recommends MrUnknown · 2022-06 · Stack Overflow · on “about the react hook useEffect deps array”
It's not a good practice to use useEffect as a way to control the flow of your data, more about this here [this video] . Why don't you just call setApiValues instead of setvalue1 and setvalue2 ?
Recommends Emos Turi · 2022-07 · Stack Overflow · on “How do I use 'useEffect' in React 18”
The problem with this is not the return. Because in the tutorial from Slobodan he is actually intending to run this when the component unmounts. Unfortunately this is not possible with React 18 anymore and neither running thing only once when the component mounts, because in React 18 useEffect actually runs twice since the component mount twice as well. with a simple console.log inside of a useEffect you can see what happens. WRONG React 18 approach. Test: const MyTestComponent = () => { useEffect(()=>{ console.log('component mounted') //This will actually output twice. },[]) return <div>test component</div> } CORRECT React 18 approach. Actual code: const About = () => { const [letterClass,
Cites Boris Pöhland · 2022-08 · Stack Overflow · on “How to solve dependent state updates "the react way"?”
I stumbled upon a very interesting question and I would like to know how to best solve this in React. Assume the following code: const [qrText, setQrText] = useState("") ... const generateQrCode = () => { // set other state inside the "then" QRCode.toDataUrl(qrText).then(...) } const handleChange = (e) => { setQrText(e.target.value) generateQrCode() } This code is unsafe, since state updates are asynchronously, and by the time generateQrCode runs, qrText could still have the old value. I always tended to solve this problem using a useEffect with dependency array: const [qrText, setQrText] = useState("") ... const handleChange = (e) => { setQrText(e.target.value) } useEffect(() => { const gen