Flickering switch.

[ChildishhAlbino]

Hey there.

I'm using this for my portfolio as a dark/light mode toggle. Functionally; it works great, however, there's a slight issue with how it interacts with my theme toggling plugin.

<ThemeToggler>
              {({ theme, toggleTheme }) => (
                <div className="toggle-container">
                  <Switch
                    checked={theme === "dark"}
                    onChange={checked => toggleTheme(checked ? "dark" : "light")}
                    checkedIcon={<span aria-label="moon" role="img" className="toggle-icon">🌑</span>}
                    uncheckedIcon={<span aria-label="sun" role="img" className="toggle-icon">🌞</span>}
                    offColor="#ff145a"
                    onColor="#a0a5ff"
                    height={28}
                    width={56}
                    handleDiameter={20}
                  />
                </div>
              )}
            </ThemeToggler>

I'm using it as part of a render prop which I believe is leading to the switch being a tad delayed to update as it's dependent on the theme value from said render prop. You can visit my portfolio to see this in effect. If dark mode is enabled, switching pages will cause the switch to flicker into the unchecked state for a frame or two before returning to the checked state.

I forked your code and tried to fix this with shouldldComponentUpdate() but didn't seem to work too nicely so I wanted to put this out there and see if you'd experienced this issue before and if this could be rectified in future.

[ThibaultGobert]

I don't see it, is it still reproducable?

[ChildishhAlbino]

oh my apologies. This was an issue with my approach.