bubbleSynth VS why-did-you-render

For those curious here's a link to the project in github: https://github.com/Vdevelasco/bubbleSynth

Idk how to make a code sandbox but I guess that putting the link to github should do the job, the only problem is that it's a tauri app so it needs some modifications before running as react (for those who don't know it's basically like electron but: uses rust as backend and uses the system web browser instead of comming with one). Tell me if you find any problems: https://github.com/Vdevelasco/bubbleSynth

I have a component called bubble inside a parent component called workspace, the idea is simple: whenever I click inside the workspace a Bubble should be created (it should also show the corresponding fade in animation) and when I ctrl+click it should disappear, but not just stay hidden, I mean removing the element from the DOM (this is what I couldn't do efficiently), this has proven to be quite annoying, maybe it's because my lack of understanding of how react works but that's more or less the kind of interface that I want to design for a bigger program. I think that my lack of experience with the language shows bc some things seem "hacky" and overcomplicated when they should, in theory, be easier. Here's the source code: https://github.com/Vdevelasco/bubbleSynth I'm only interested in Bubble.tsx and Workspace.tsx, please ignore the tauri stuff as it's not important rn and afaik it doesn't affect the rest.

Check out why-did-you-render. It may tell you some more information.

It's a combination of many things, but imo one of the worst is all the footguns regarding state and the rerenders they cause

https://emnudge.dev/blog/react-hostage

It's so easy, that we monkey patch react to debug it https://github.com/welldone-software/why-did-you-render

Plus the vdom... Isn't great, the bundle size puts react at an inherit disadvantage, and the community has a knack for over reliance on bloated packages

When we implemented the MVP of the fintech app, we had a quite complicated form. At that time, I was still young and inexperienced. And eventually, we realized that our project was slowing down. We had to spend additional hours figuring out the reason. We had many unnecessary re-renders because we ignored basic rules related to props in React. I wanted to do everything possible to avoid such situations in the future. So, I added to the project linters like this and an additional starting configuration to package.json to run why-did-you-render. In short, this plugin issues a warning if something is re-rendered unnecessarily and suggests how to avoid it. Also, we included running Lighthouse in headless mode. Some people say that premature optimizations are bad, but for me, it's a principle: do it right from the start.

maybe somethin like https://github.com/welldone-software/why-did-you-render

This might help you out a bit.