Code runs twice after adding useColorModeValue hook

[justnoobbot]

Description

When I run the app i expect console.log("log") to run once, but it got executed twice

Link to Reproduction

https://codesandbox.io/s/chakra-ui-usecolormodevalue-j5y1j?file=/src/App.js

Steps to reproduce

1. Visit sandbox
2. Click console
3. See console.log("log"); got executed twice

When I remove const bg = useColorModeValue("white", "gray"); it runs once as expected
(I need that in my project)

Chakra UI Version

1.6.12

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[anubra266]

Hi @justnoobbot this is not a bug, it's working as designed by React. useColorModeValue uses the useColorMode hook which consumes ColorModeContextwith the ReactuseContexthook. TheuseContext` hook is what causes the rerender. Get more explanation here

[primos63]

@anubra266 I believe this is the color mode issue that was just fixed by #4989. If the system color mode is dark then the app is rendered with the initialColor mode, light. It then re-renders with dark mode. Using the CSB with the fix, the example that was provided only renders once for light mode.

[anubra266]

A new version has been released @justnoobbot which includes the fix

[justnoobbot]

@anubra266 I just updated
check this out: https://codesandbox.io/s/chakra-ui-usecolormodevalue-j5y1j?file=/src/App.js
still re-renders with dark mode

[anubra266]

@anubra266 I just updated check this out: https://codesandbox.io/s/chakra-ui-usecolormodevalue-j5y1j?file=/src/App.js still re-renders with dark mode

cc @primos63

[anubra266]

Thank you @anubra266 & @primos63 , is there any workaround for this ?

I started using a react video player (Plyr) and that re rendering is breaking my code

const Component = () => {

  const bg = useColorModeValue("white", "gray");

  const videoSrc = { sources: chapter.source };

  return (  

   // ... 

   <Plyr source={videoSrc} /> // No output

   // ...

  );

}

In the mean time you can use the _dark pseudo prop for mode styling instead of the useColorModeValue hook @justnoobbot

[primos63]

@anubra266 I just updated check this out: https://codesandbox.io/s/chakra-ui-usecolormodevalue-j5y1j?file=/src/App.js still re-renders with dark mode

cc @primos63

My apologies. I missed the notification on this. I looked at the CSB, what am I suppose to observe? I ran the app with and without the commented out code. Each time the log, modified to console.log('log', colorMode), show a single message with the color mode. The text that says "There's nothing here!" displays appropriately regardless of the color mode.

Uncommenting the code, useColorModeValue, and changing the log message to console.log('log', bg) also produced a single log message with the correct color mode value.

[anubra266]

@anubra266 I just updated check this out: https://codesandbox.io/s/chakra-ui-usecolormodevalue-j5y1j?file=/src/App.js still re-renders with dark mode

cc @primos63

My apologies. I missed the notification on this. I looked at the CSB, what am I suppose to observe? I ran the app with and without the commented out code. Each time the log, modified to console.log('log', colorMode), show a single message with the color mode. The text that says "There's nothing here!" displays appropriately regardless of the color mode.

Uncommenting the code, useColorModeValue, and changing the log message to console.log('log', bg) also produced a single log message with the correct color mode value.

@primos63 try it in dark mode

[primos63]

The text that says "There's nothing here!" displays appropriately regardless of the color mode.

I did. In light mode the text is black and bg white. In dark mode the bg is dark gray and text is white. What am I suppose to be seeing?

[anubra266]

The text that says "There's nothing here!" displays appropriately regardless of the color mode.

I did. In light mode the text is black and bg white. In dark mode the bg is dark gray and text is white. What am I suppose to be seeing?

@primos63 Check the console in dark mode, the component is rendered twice.

[primos63]

@anubra266 Thanks. I just finished triaging the issue. This is the white flash/double render issue caused by the ColorModeManager. I've tested a local fix with a React app and will follow up with one using Next. Once that's complete I'll submit a PR.

[stale]

Hi!
This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs within 5 days. Thank you for your contributions.