Remix: Changing useSafeLayoutEffect to React.useEffect in packages/color-mode/src/color-mode-provider.tsx introduces flash when changing color mode

[rhefner]

Description

When I change the color mode, I expect there not to be a flash. With an older version of Chakra, there is no flash. Any newer version of Chakra flashes when switching color modes.

Link to Reproduction

https://codesandbox.io/s/remix-chakra-color-mode-flash-796npi

Steps to reproduce

1. Go to codesandbox above
2. Click on color mode switcher at top right to use dark mode
3. Observe background goes from white => dark => white => dark with only one click
4. Click on color mode switcher at top right to use light mode
5. Observe the reverse of step 3

To see the example with no flash:

1. Change the package versions to the first group of packages in "Additional Information"
2. Restart the Codesandbox Server
3. Observe no flashing

Chakra UI Version

2.2.6

Browser

Google Chrome 104, Firefox 103

Operating System

• macOS
• Windows
• Linux

Additional Information

I think the issue came from this PR (specifically this change) which was needed for Next.js.

I'm not a Next user, but I do use Remix and Chakra was working fine up until v2.2.4 which I believe has the issue. Any release I've tried after seems to have the same problem and I haven't found a solution on the Remix side to stop it, though I'm no expert. I'd prefer not to patch-package, so I decided to file this to see if anything can be done or if I'm doing something wrong.

Using package versions below, there is no flash:

    "@chakra-ui/form-control": "2.0.3",
    "@chakra-ui/icon": "3.0.3",
    "@chakra-ui/layout": "2.1.0",
    "@chakra-ui/menu": "2.0.5",
    "@chakra-ui/react": "2.2.3",
    "@chakra-ui/spinner": "2.0.3",
    "@chakra-ui/system": "2.2.1",
    "@chakra-ui/theme": "2.1.2",
    "@chakra-ui/theme-tools": "2.0.4",
    "@chakra-ui/utils": "2.0.3",

When I upgrade the packages to anything higher than what's above, then the flash is introduced. Example used:

    "@chakra-ui/form-control": "2.0.6",
    "@chakra-ui/icon": "3.0.6",
    "@chakra-ui/layout": "2.1.3",
    "@chakra-ui/menu": "2.0.8",
    "@chakra-ui/react": "2.2.6",
    "@chakra-ui/spinner": "2.0.6",
    "@chakra-ui/system": "2.2.4",
    "@chakra-ui/theme": "2.1.5",
    "@chakra-ui/theme-tools": "2.0.7",
    "@chakra-ui/utils": "2.0.6",

Using the later versions in my local dev environment, I manually edited node_modules/@chakra-ui/color-mode/dist/chakra-ui-color-mode.esm.js to use useSafeLayoutEffect and the flash stopped.

[segunadebayo]

Hi @rhefner,

This was done to support suspense and concurrent features in React 18. I don't see a flash in the attached CodeSandbox, and your setup looks okay to me.

I'll move this to a discussion to facilitate more ideas.

[rhefner]

Hi @segunadebayo - Thank you for taking a look! I'm not sure why you don't see it, but I've tried it on multiple computers and web browsers and still see it. I've recorded a screencap if you want to take a look.