Hi,
i have a react component implemented into Vaadin, like in the Color-Picker example.
The problem now is, even in productionMode, it appears to execute the render-function in the tsx-file twice on pageload and the component gets rendered twice.
I can mitigate this by simple counting the rerenders and only letting the second one be visible (it doesnt like “return null” and the first render disappears sometimes), but i dont want that to be a long-term solution.
Did anybody else have this problem? couldnt find anything online.
React works by running the render function again whenever any state for the component changes. But this should not lead to seeing multiple copies of the component on the screen since each subsequent rendering should replace the previous one.
Do you observe the same symptom also if you replace your own component with the color picker example from the documentation? Alternatively, what happens if you have a simple standalone example based on the color picker component and then modify that to use your own component instead?
If i replace the component with the color-picker it also shows two of them, but if i implement the component in a simple project it only shows once.
What could cause this behavior? Is maybe something hindering the first render to be removed?
It is wrapped in a subclass of the LitTemplate, maybe because of that boxing?
I tried replicating it with the LitTemplate, but I wasn’t able to.
I have no direct guess on what might be the cause here. But those replacement experiments indicate that it’s somehow something specific to your project.
The first really simple thing to double check is that you aren’t by accident creating and attaching multiple instances already from server-side Java? Other than that, I have no other ideas than trying to extract a minimal reproducible example out of your project.
I checked and there is no other appending happening.
I will try to replicate it by gradually adding more complexity to the simple project and watch out for duplicates.
Thanks for the help so far, at least i now know that this is not a common issue.
I will give an update when I find the problem or can at least replicate it.