Words swapping places for some renders

[Bryan Overduin]

I'm having trouble trying to keep the words in the same place before a re-render. 50% of the time words update perfectly fine after an update but in some cases two or more words seem to 'randomly' swap positions. Is this a common issue or is there a workaround for this?

Here's a demo in codesandbox.

Thanks for taking the time to read!

[Chris Zhou]

@Bryan1337, not 100% sure and won't be able to have that fine-grain control on this behavior. My suspicion is the logic that is trying to re-layout the cloud is causing the issue: https://react-wordcloud.netlify.app/faq#dropped-words

When the wordcloud is not able to layout some words, it tries a few times until it succeeds/fails. I believe each time it's trying to layout the word, the positions of all words probably changed so when the re-render happens, it seems as if it jumps.

This is just a theory (untested), so if you can try orientations that avoid vertical orientations, or test with smaller font sizes or word length, the issue might disappear.

I might be able to fix/address this bug due to its complexity and lack of time, but hope you can find an acceptable workaround to the issue!