useEffect, useState, and order of execution
I'm working on a fun little utility to make SVG morph animations and performance has become an issue with complex SVGs so I decided this is a good opportunity to properly learn about promises, async, await, etc. to avoid freezing the main thread (I've only been using React for the past couple of months and only really got into Javascript/Typescript since August). I have an onClick function that updates a state variable with the new SVG as string and then a useEffect where all the heavy processing happens. I hadn't worked on this project for a month and forgot that I did things in such a wierd way, so I initially made the onClick async and put a try catch finally in it. It actually mostly did what I wanted (the loading spinner which I turn off in the finally spins until the process is complete), but the program was still freezing and that's when I remembered the useEffect. For the purposes of the project, I probably should move everything around to be more reasonable, but I found the order of execution really interesting. I would have expected the try catch finally in the click handler to be done after changing the state variable, but it seems like it waits until after the dependent useEffect. Is that correct? Is this related to the funny way that updateState functions don't always work with the latest value so you have to do the updateState(prev=>prev+1) instead of updateState(state+1) thing if its updates twice within a function? Do useEffects insert themselves in the order of execution right after updateState functions in a way that would slow down a finally?
