[react] The child component is mounted twice

[kokovtsev]

Describe the bug When the OverlayScrollbarsComponent is mounted, it mounts the children twice.

There was a similar issue #558 where the defect was not confirmed, but it appears that the defect is present in a more recent version of overlayscrollbars itself or the React binding.

To Reproduce Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/mystifying-rubin-d8n7f7?file=/src/index.js
2. Observe console logs

Expected behavior

Indicator2 mounted

• which would indicate that the child component is mounted only once

Actual behavior

Indicator2 mounted 
Indicator2 unmounted 
Indicator2 mounted 

• which apparently means that the component is mounted, then removed from the tree and mounted again

Environment

Checked on Windows 10 and Chrome 116. overlayscrollbars@2.3.2. overlayscrollbars-react@0.5.2

Additional context There was a similar issue #558 which turned out to be not related to OverlayScrollbars. The issue was not reproducible with overlayscrollbars@2.1.1. overlayscrollbars-react@0.5.0

[KingSora]

@kokovtsev Thanks for the report! I'll look into it as soon as I have time

[kokovtsev]

Thanks for prompt reply!

As @ignatevdev pointed out in #558, this seems to happen because of changing the tree structure after the initial render. I've submitted a PR #566, which fixes the problem for me. However, I am not sure why that div was missing from the initial render - maybe for a good reason. Could you please check if the fix is valid?

[KingSora]

@kokovtsev I've published overlayscrollbars-react version 0.5.3 which should fix the issue.

[KingSora]

@kokovtsev I'll close the issue for now. In case its not solved with the newest version please don't hesitate to give feedback here or to open a new issue

[kokovtsev]

Yes it's solved now, thank you!