Theme sync may cause render loops across different browser tabs #1352
Description
- 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.
- 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.
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?