wary bear
Hello~
I am trying to make a Postman/Insomnia clone here https://github.com/hbina/flutter-shy
It is very, very slow when loading a large Swagger (like Binance API docs - its the only big swagger file that I can find)
Any tips? I am guessing I am causing React to do a lot of work re-rendering.
I tried to visit my app from the web but it doesn't work so I can't use React extension to analyze the bottleneck.
honest vale
you can use the standalone react-devtools app (you can install it via npm) to debug it, just paste the line it give you into your index.html. But, make sure to remove that line before committing / publishing.
rapid pagoda
Depending on how large the data you're loading is, the sending of data from Rust to JS may be the bottleneck
wary bear
Okay so the performance is a lot better in the release build, but it is still annoying how sluggish it is when trying to debug (also means that the release version could be much better)
The problem right now is that when I do any changes (that triggers setState), the application grinds to a halt for a brief moment and runs the render for each single character input
I understand the first initial load to be slow, the swagger file might be big after all
But everything afterwards should be snappy, there's not really anything to render here? I assume it only render what is visible and the inputs should only change some leaves on the tree not the entire root
rapid pagoda
I haven't been able to use the app bc post, get, etc aren't being found in curlState but having all your state at the top level will cause all cause the entire component tree to be recalculated when you update a single input
It's not necessarily bad to have your state hoisted but you just need to be mindful of it
Also this code is really hard to debug without having type definitions available 😅
wary bear
yea it currently populates the curlState only when you change the inputs (which requires the API to have some parameters)
but this can trivially be fixed by checking that the method/path doesn't have anything and just renders a default cURL command
another thing, so i switched to Windows and the performance is SO MUCH BETTER even in debug mode
perhaps the Linux webview thing is really unoptimized?
Obviously a lot of things to work on, but I am starting to see it as possible
I shudder to think about the CSS later on lol
wary bear
Also this code is really hard to debug without having type definitions available...
Agreed, I am not a frontend developer myself
This gives me both respect and fear that people can actually yolo JavaScript (like some of my coworkers)
rapid pagoda
lmao i have less respect for anyone who insists on working in JS (unless they're good about using JSDoc types)
use TS or bust
using tailwind for styling will make your life pretty easy
severe vector
Oh nice also started a Postman clone. I only use Typescript in my projects. A pretty old big project doesn’t use type definitions and you are constantly guessing what type a variable could be.
Based on the GitHub code a state machine like pmdr/zustand could benefit your projects. React useState is great for local state component but if you have something that needs to be displayed/changed in multiple locations I only use State machines like before mentioned library. It makes live easier and predictable and you don’t need to pass things around.