Theme sync may cause render loops across different browser tabs

lancegliser commented 3 months ago

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

Steps to reproduce

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

Run dev server
Open 2-3 copies in different tabs
Adjust a copy of one window's performance tab to use 6x throttling
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.

ezgif-5-ce03d57c56

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 #610.
There an argument for not even having a local storage key in #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 commented 2 months ago

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

SutuSebastian commented 2 months ago

@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 commented 1 month ago

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.

themesberg / flowbite-react