Skip to content

CE-2952: (PATCH) use tab.label as key for tab.content rendering to stop re-render

Max Frederiksen requested to merge CE-2952-PATCH into main

So my previous MR caused an infinite re-render bug, which unfortunately I couldn't get around and still use the useUniqueKeys function.

~~The function seemingly works as it should for the other components and I've not ran into the same issue anywhere else. So the issue arises with a combination of both that specific rendering location and the function. If I switch to using, in this case, tab.label or i it works. After having spent almost a whole day more trying to debug this I decided to revert back to using tab.label since that one will pass the sonarqube test and also not cause re-renders. I left a comment in the code that this should be investigated, and also I added it to ~~this ticket

Please let me know if I should remove the comment from the code.

I had a huddle with Imre going through the bug and we tried all sorts of solutions. Finally I realized that the way I pass the dependency into the useMemo dep array position is wrong. I'm passing it with extra array brackets around which was causing the issues. Sigh 🤦

Well it didn't completely solve it for this specific Tab panel case because we also had to change the actual dep array to only be based on the labels and not the content (content = component that continually re-renders) which is something I had tried before, but since I didn't fix the bracket issue it was not working...

Anyhow, moral of the story: It's always good to have to walk-through your process with someone else as it makes you realize things you might have missed. Thanks @imretoth 🙏

Edited by Max Frederiksen

Merge request reports