Theme sync may cause render loops across different browser tabs

[lancegliser]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Steps to reproduce

Clone reproduction repo. Basically npm create flowbite-react@latest.

1. Run dev server
2. Open 2-3 copies in different tabs
3. Adjust a copy of one window's performance tab to use 6x throttling
4. Spam the light / dark switcher

Current behavior

The tabs are reading, rerendering, and causing other events to communicate back and forth probably based on local storage hooks. This can cause them to hit infinite loops in all tabs.

Expected behavior

No infinite loops.

Context

The reproduction repo here is very silly. We found this bug in our real application, which renders a number of complex SVG's and other expensive operations. A user had just two tabs open, and was able to cause it with a simple double click on the theme switcher.

• The persistence of the theme sync between tabs was created in local storage as a result of Dark/light mode doesn't persist on refresh in local server #610.
• There an argument for not even having a local storage key in ToggleDarkTheme could lead to GDPR issues #546.

I wonder if there's neutral ground to be established by adjusting theme mode auto. Perhaps while it's on auto, it just reads the browser preference only, and never even enables the local storage hooks. Maybe there's an option opt in or out of the local storage hooks?

[lancegliser]

@SutuSebastian Is there any particular direction the Flowbite team might prefer? If I find hours, I could start a PR for discussion.

[SutuSebastian]

@SutuSebastian Is there any particular direction the Flowbite team might prefer? If I find hours, I could start a PR for discussion.

Feel free to contribute with whatever u can 🔥

[lancegliser]

No real code yet, but just reviewing what it currently does I have some questions:

• Why is there both a local storage watcher and an event watcher?
• I considered using a debounce around handleSetMode, but in automated scenario, it's possible this could break tests. They could test the page, swap dark, test the page, and swap again within the debounce timeout.