Device page registering to live events twice

[Pavinati]

In the current master branch (v1.2.0-dev) the device page registers to device events twice, probably due to a component rerender

[Hibe7]

I have investigated this issue a little and I found that React version is changed from 17 to 18. This change could be causing the problem because, starting from React 18, Strict Mode intentionally double-renders components to help identify potential issues. As a result, this useEffect is executed twice, leading to the opening of two WebSocket connections and the appearance of duplicate data. Strict mode double-renders components twice just in development mode, in production it renders once. If you want to fix this in development mode we can remove strict mode, that is one solution, or we can use useRef hook and use if statement to prevent second execution of useEffect that I mentioned above.

[davidebriani]

@Hibe7 thanks for the investigation, I guess you found the cause and I assume you verified it by opting out of Strict Mode and seeing that logs don't appear twice anymore.

Regarding the proposed solutions:

• I find it correct that the page performs a new event subscription each time the React re-renders: we want to have an active subscription when the component is displayed. For this reason I would not try to prevent subsequent useEffect runs.
• I would leave Strict Mode on since it's useful for development, and just stick with the fact that logs are shown twice in development.

For further details, see the React documentation where they explicitly advise on avoiding useRef to prevent Effects from firing: https://react.dev/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development

With that, we verified that the issue is not a bug and it only happens during development, so I'll proceed to close the issue.