When working with React.js - does the browser behave differently in the pixel rendering pipeline when we update CSS declaratively -like through state in event handlers:
<div className={isDark ? 'dark' : 'light'}>
<button onClick={() => setIsDark(prev => !prev)}>
Toggle Dark Mode
</button>
</div>
versus imperatively when using useEffect and native DOM methods:
function useDarkMode(isDark) { useEffect(() => {
const classList = document.documentElement.classList;
isDark ? classList.add('dark') : classList.remove('dark'); },isDark]);}
especially when targeting non-React-controlled elements like the tag for dark/light mode? the pixel pipeline im refering to is for example described in this article https://web.dev/articles/rendering-performance. Seems like the second approach is used quite often in dark/white modes and wonder if the whole web app has to go in that second sceanrio through virtual DOM diffing and then pixel pipeline or just the pixel pipeline?
